webpack优化

以下内容均整理自 (juejin.cn/post/684490…) 和 (www.cnblogs.com/kidflash/p/…)

构建速度优化：

1. 优化loader配置：

   缩小文件匹配范围；
   缓存loader执行结果：加cacheDirectory（use:’babel-loader?cacheDirectory’）;
   

2. 优化resolve配置：

   优化模块查找路径：转换绝对路径path.join(__dirname,dir)
   配置路径别名：alias，精确匹配：$
   解析确定文件后缀：extensions:[‘.js’,’.vue’]
   

3. HappyPack：

   让webpack对loader的执行从单一进程扩展为多进程
   plugins:[
       new HappyPack{}	
   ]
   

4. DLL动态链接库：

   将web应用依赖的基础模块抽离，打包到单独的动态链接库，
   一个动态链接库可以包含其他模块调用的函数和数据，
   动态链接库只需被编译一次，
   依赖的两个内置插件：DllPlugin 和 DllReferencePlugin
   plugins: [
           new webpack.DllPlugin({})
   ]
   打包生成动态链接库:
       webpack --config webpack_dll.config.js --mode production
       在dist目录下多出动态链接库js文件
   在主配置文件中使用动态链接库文件
   将动态链接库文件加载到页面中：
       html-webpack-plugin 产出html文件
       html-webpack-include-assets-plugin 将js css资源添加到html中 扩展html插件的功能
   

构建体积优化：

1. sourcemap：

   devtool: 'cheap-module-source-map'
   eval模式虽然可以提高构建效率，但是构建后的脚本较大，因此生产上并不适用。
   而source-map 模式可以通过生成的 .map 文件来追踪脚本文件的 具体位置，进而缩小脚本文件的体积，这是生产模式的首选，
   并且在生产中，我们需要隐藏具体的脚本信息，可以使用 cheap 和module 模式来达到目的。
   

2. 启用模块热更新 HMR：

   允许在运行时更新各种木块，而无需进行完全刷新
   devServer: {
       hot: true // 开启HMR
   }
   添加插件NamedModulesPlugin 和 HotModuleReplacementPlugin
   

3. 提取公共代码 与 第三方代码

   在webpack4.0 optimization.splitChunks替代了CommonsChunkPlugin
   

4. 懒加载（按需加载）：

   r=>require.ensure([],()=>r(require(‘’)))
   

5. 开启Scope Hoisting ：

   4默认开启，让打包出的代码文件更小，运行更快
   

6. 独立css文件： mini-css-extract-plugin
7. 压缩js,html,css文件：

   html：new HtmlWebpackPlugin({minify{//压缩html的配置}})
   css：new OptimizeCSSAssetsPlugin()
   

8. 依赖库分离：

   分离第三方依赖库，可以更好的利用浏览器缓存，提升应用性能
   optimization: {
               splitChunks: {
               cacheGroups: {}
       }
   }
   

9. 依赖分析：webpack-bundle-analyzer
10. Tree Shaking

    依赖静态的ES6模块化语法
    删除js中用不上的代码