webpack优化 1.production 模式打包自带优化
tree shaking
tree shaking是一个术语、通常用于打包时移除js中未引用的代码(dead-code)，它依赖于ES6模块系统中的import 和 export 的静态结构特性
开发时引入一个模块时，如果只引用其中一个功能，上线打包时只会把用到的功能打包进bundle中，其他没有用到的功能都不会打包进来，可以实现最简单的基本优化
创建一个 math.js, 抛出两个方法
export const add = (a, b) => a + b export const minus = (a, b) => a- b在 main.js 中使用
// tree shaking 分析 // 若是此时使用 require 引入，不管 math 中的方法是否使用，都会被打包 const math = require('./utils/math') // 若是使用 import 引入， 只会打包使用了 math 的方法 import { add } from './utils/math' console.log('index 页面',math.add(1,2)); console.log('index 页面',add(1,2));根据不同的引入方式进行打包，观察打包后的文件
scope hoisting
Scope hositing 作用:是将模块之间的关系进行结果推测，可以让webpack文件打包出来的代码文件更小、运行的更快
scope hositing实现原理:分析出模块之间的依赖关系，尽可能的把打散的模块合并到一个函数中，但是前提是不能造成代码冗余， 因此只有哪些被引用了一次的模块可能被合并
由于scope hositing 需要分析出模块之间的依赖关系，因此源码必须使用ES6模块化语句，不然就不能生效，原因和 tree shaking一样
在 main.js 中定义几个变量并输出
const a = 1 const b = 2 const c = 3 // webpack 在这里会进行 预执行，将结果推断后打包放在这里 console.log(a + b + c) console.log(a, b, c)
打包之后代码变成
console.log(6),console.log(1,2,3)因为三个变量只是在这个地方定义并且使用，并没有在其他位置使用，webpack会直接以具体的数值进行打包，节省了三个变量的定义
代码压缩
所有代码使用UglifyJsPlugin进行压缩、混淆
2.CSS优化 2.1 将CSS提取到独立文件中Mini-css-extract-plugin 是用于将 CSS 提取为独立的文件的插件，对每个包含css的js文件都会创建一个css文件，支持按需加载css和sourceMap
只能用于webpack4中，优势
异步加载
不重复编译，性能更好
更容易使用
只针对css
使用
安装
npm i -D mini-css-extract-plugin
引用
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
创建插件对象，配置抽离的css文件名，支持placeholder语法
new MiniCssExtractPlugin({ filename:'[name].css' // [name] 就是 placeholder 语法 })
将原来配置的所有 style-loader 替换为 MiniCssExtractPlugin.loader
{ test:/\.css$/, use:[MiniCssExtractPlugin.loader, 'css-loader'] }, { test:/\.less$/, use:[MiniCssExtractPlugin.loader, 'css-loader', 'less-loader'] }, { test:/\.scss$/, use:[MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader'] }, 2.2 自动添加CSS前缀使用 postcss，需要使用 postcss-loader 和 autoprefixer
安装
npm i -D postcss-loader autoprefixer
修改配置文件，将 postcss-loader 放置在 css-loader 右边
{ test:/\.css$/, use:[MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader',] }, { test:/\.less$/, use:[MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader', 'less-loader'] }, { test:/\.scss$/, use:[MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader', 'sass-loader'] },
项目根目录下添加 postcss 的配置文件: postcss.config.js
module.exports = { plugins: [ require('autoprefixer')({ browsers: [ // 加这个后可以出现额外的兼容性前缀 "> 0.01%" ] }) ] } 2.3 开启CSS压缩需要使用 optimize-css-assets-webpack-plugin 插件来完成css压缩
但是由于配置css压缩时会覆盖掉webpack默认的优化设置，导致JS代码无法压缩，所以还需要把JS代码压缩插件倒入进来 terser-webpack-plugin
安装
npm i -D terser-webpack-plugin optimize-css-assets-webpack-plugin
引用
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin'); const TerserPlugin = require('terser-webpack-plugin');
配置
optimization:{ minimizer: [ new TerserPlugin({}), new OptimizeCssAssetsPlugin({}) ] }webpack4默认采用的JS压缩插件是 uglifyjs-webpack-plugin，在 mini-css-extract-plugin上一个版本中还推荐使用该插件，但是新的版本却建议使用 terser-webpack-plugin
3.JS优化code splitting 是webpack打包时用到的重要的优化特性之一、此特性能够把代码分离到不同的bundle中，然后可以按需加载或者并行加载这些文件，代码分离可以用于获取更小的bundle，以及控制资源加载优先级，如果能够合理的使用能够极大影响加载时间
三种常见的代码分离方法
入口起点：使用entry配置，手动的分离代码
放置重复：使用 SplitChunksPlugin 去重和分离 chunk
动态导入：通过模块的内联函数调用来分离代码
3.1手动配置多入口手动配置多入口会存在一些问题
如果入口chunks之间包含重复的模块，哪些重复的模块都会被引入到各个打包后的js文件中
方法不够灵活，并且不能将核心应用程序逻辑进行动态拆分代码