webpack的优化

production打包自带优化

1.tree shaking（将没用的代码摇晃掉）

 将一些没引用的代码移除，它依赖于 ES6 模块系统中 import和 export的静态结构特性。

require是动态导出的，不能使用 tree shaking

2.scope hoisting（作用域提升）

将模块之间的关系进行结果推测， 可以让 Webpack 打包出来的代码文件更小、运行的更快

scope hoisting 的实现原理其实很简单：分析出模块之间的依赖关系，尽可能的把打散的模块合并到一个函数中去，但前提是不能造成代码冗余。 因此只有那些被引用了一次的模块才能被合并。

由于 scope hoisting 需要分析出模块之间的依赖关系，因此源码必须采用 ES6 模块化语句，不然它将无法生效。 原因和tree shaking一样。

原理：使用了ModuleConcatenationPlugin

3.代码压缩

所有代码使用UglifyJsPlugin插件进行压缩、混淆

Css优化

1.将css提取到独立的文件中去

mini-css-extract-plugin 将css文件提取到独立的文件中去，对每个包含css的文件都会创建一个css文件，支持按需加载css

1. 安装
   npm i -D mini-css-extract-plugin
2. 在webpack配置文件中引入插件
       const MiniCssExtractPlugin = require('mini-css-extract-plugin')
3. 创建插件对象，配置抽离的css文件名，支持placeholder语法
       new MiniCssExtractPlugin({
       	filename: '[name].css'
       })
4. 将原来配置的所有style-loader替换为MiniCssExtractPlugin.loader
{
test: /\.css$/,
// webpack读取loader时 是从右到左的读取, 会将css文件先交给最右侧的loader来处理
// loader的执行顺序是从右到左以管道的方式链式调用
// css-loader: 解析css文件
// style-loader: 将解析出来的结果 放到html中, 使其生效
// use: ['style-loader', 'css-loader']
use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader']
},
// { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] },
{ test: /\.less$/, use: [MiniCssExtractPlugin.loader, 'css-loader', 'less-loader'] },
// { test: /\.s(a|c)ss$/, use: ['style-loader', 'css-loader', 'sass-loader'] },
{ test: /\.s(a|c)ss$/, use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader'] },

2.自动添加css前缀

postcss可以自动添加前缀：

1. 安装
   npm i -D postcss-loader autoprefixer
2. 修改webpack配置文件中的loader，将postcss-loader放置在css-loader的右边（调用链从右到左）
       {
       test: /\.css$/,
       // webpack读取loader时 是从右到左的读取, 会将css文件先交给最右侧的loader来处理
       // loader的执行顺序是从右到左以管道的方式链式调用
       // css-loader: 解析css文件
       // style-loader: 将解析出来的结果 放到html中, 使其生效
       // use: ['style-loader', 'css-loader']
       use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader']
       },
       // { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] },
       { test: /\.less$/, use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader', 'less-loader'] },
       // { test: /\.s(a|c)ss$/, use: ['style-loader', 'css-loader', 'sass-loader'] },
       { test: /\.s(a|c)ss$/, use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader', 'sass-loader'] },
3. 项目根目录下添加postcss的配置文件：postcss.config.js
4. 在postcss的配置文件中使用插件
       module.exports = {
         plugins: [require('autoprefixer')]
       }

这里的post-css一定要加载css-loader的右边，加载less-loader或者scss-loader的左边

3.开启css的压缩：

这里使用的插件是：optimize-css-assets-webpack-plugin

1.安装：
npm i -D optimize-css-assets-webpack-plugin terser-webpack-plugin
2.导入插件
const TerserJSPlugin = require('terser-webpack-plugin')
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin')
3.增加节点：
optimization: {
  minimizer: [
    //这个是用于js的压缩
    new TerserJSPlugin({}),
    //这个是用于css的压缩
     new OptimizeCSSAssetsPlugin({})],
},

3.js优化

code Splitting  将多个js分离到不同的bundle中，然后可以按需加载或并行加载这些文件。

1.手动配置多入口：(见上一章节webpack的优化)

2.防止重复

3.动态导入   （路由懒加载的原理）