Webpack 的优化

Webpack 的优化

1. production下自带打包优化

1.1 tree-shaking 文档说明

1. 在打包的时候移除没有被引入的代码，但是依赖于ES6的import和export导出模块，基于CommonJS的modules.exports不可以使用
2. config.js文件

   export const str = "小火车"
   export const  name = "大汽车"
   

3. 导入的config文件，这个时候打包就不会将export const str = '小火车'打包

   import {name} from "./config"
   

1.2. scope-hoisting 文档说明

1. scope hoisting分析出模块之间的关系，尽可能的将打散的模块合并到一个函数中，前提是不可以造成代码的冗余
2. 只有那些被引用了一次的代码才可以被合并
3. 也必须使用ES6的导出模块
4. config.js文件

   export const a = 100
   export const b = 200
   export const c = 300
   

5. 导入的config.js文件，这个时候webpack就不会将config.js文件中的代码打包，但是会直接得到一个console.log(600)计算好的结果

   import {a,b,c} from "./config"
   console.log(a+b+c)
   

1.3 UglifyJsPlugin代码压缩 进行压缩、混淆

2. css优化

2.1 将css提取到独立的文件中

1. 没有使用插件的情况下，所有的css都是在最前面引入的
   
2. 使用插件mini-css-extract-plugin，只能在webpack4中使用
3. 安装npm i mini-css-extract-plugin -D
4. 使用方法，和其他的插件plugin一样

   new MiniCssPlugin({
   	filename: '[name].css'
   })
   

5. 之后将原来配置的所有style-loader替换为MiniCssPlugin.loader

   const MiniCssPlugin = require("mini-css-extract-plugin")
   module.exports = {
   	// 入口文件的配置
       entry: "./src/index.js",
       // 出口文件的配置 
       // 出口文件必须使用的是绝对路径 导入 path 模块 必须为对象
       output: {
           /* 
           * path : 用于指定文件的导出路径
           * name : 用于指定文件的导出名称
           */
           path: path.join(__dirname, "..",  "./dist/"),
           filename: "main.js"
       },
       plugins: [
           // 配置 html-webpack-plugin 
           new HtmlWebpackPlugin({
               // 设置打包的文件名称
               filename: "index.html",
               // 设置需要打包的文件路径
               template: "./public/index.html"
           }),
           new MiniCssPlugin({
               filename: '[name].css'
           }),
           // 使用 clean-webpack-plugin 插件
           new CleanWebpackPlugin()
       ],
       module: {
   		rules: [
   			{
                   // 用正则匹配当前 .css 结尾的文件
                   // webpack 底层调用这些包的顺序是从右到左的管道顺序
                   test: /\.css$/,
                   // css-loader 用来解析 css 文件 
                   // style-loader 将解析的结果放到html中, 使其生效
                   use: [MiniCssPlugin.loader, "css-loader"]
               },
               // 配置用来解析 .less 文件
               {
                   test: /\.less$/,
                   use: [MiniCssPlugin.loader, "css-loader", "less-loader"]
               },
               // 配置用来解析 .scss .sass 文件
               {
                   test: /\.s(a|c)ss$/,
                   use: [MiniCssPlugin.loader, "css-loader", "sass-loader"]
               }
   		]
   	}
   }
   

6. 配置完成后
   .

2.2 自动添加css的前缀，用来处理浏览器的兼容性

1. 主要是为了处理浏览器的兼容性，这种情况下为了兼容其他浏览器，需要加上前缀
   
2. 使用postcss，但是需要用到postcss-loader和autoprefixer插件
3. 安装 npm i -D postcss-loader autoprefixer
4. 修改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: [MiniCssPlugin.loader, 'css-loader', 'postcss-loader']
   },
   // { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] },
   { test: /\.less$/, use: [MiniCssPlugin.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: [MiniCssPlugin.loader, 'css-loader', 'postcss-loader', 'sass-loader'] },
   

5. 项目根目录下添加postcss的配置文件：postcss.config.js
6. 在postcss的配置文件中使用插件

   module.exports = {
     plugins: [require('autoprefixer')]
   }
   

2.3 开启css的压缩

1. 需要使用optimize-css-assets-webpack-plugin插件来完成css压缩
2. 但是由于配置css压缩时会覆盖掉webpack默认的优化配置，导致JS代码无法压缩，所以还需要手动把JS代码压缩插件导入进来：terser-webpack-plugin
3. 安装 npm i -D optimize-css-assets-webpack-plugin terser-webpack-plugin
4. 导入

   const TerserJSPlugin = require('terser-webpack-plugin')
   const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin')
   

5. 在webpack配置文件中添加配置节点

   optimization: {
     minimizer: [new TerserJSPlugin({}), new OptimizeCSSAssetsPlugin({})],
   },