webpack优化配置总结

一、HMR

热模块替换：
一个模块发生变化，只会重新打包这个模块，而不是打包所有模块，从而提高构建速度

devServer: { 
  contentBase: resolve(__dirname, 'build'), 
  compress: true, 
  port: 3000, 
  open: true, 
  hot: true  // 开启 HMR 功能
}

二、source-map

一种提供源代码到构建后代码的映射
当构建后代码出错时，可以追踪到源代码错误，在开发环境时，方便代码调试

devtool: 'eval-source-map'

三、oneOf

用来匹配其中的一个loader

四、缓存

分为bable缓存和文件资源缓存

bable缓存：将上一次的构建后的缓存下来，使得第二次构建时打包更加高效

文件资源缓存：令代码上线后运行缓存更快

五、treeshaking

去除代码中的无用代码（打印、注释），减少代码体积
必须使用es6模块化，并且是在生产环境下

// package.json 
"sideEffects":[*.css]//避免css文件/@babel/profill文件被删除

六、codesplit

代码分割

七、lazyloading懒加载

这里是指js文件的懒加载

将important 放到回调函数中
前提条件：在做好代码分割的条件下进行

八、pwa 渐进式网络开发应用程序（serverWorker + cache）

离线缓存，即使没有网络，也能正常访问，但是有限。淘宝就是用的这个技术

npm install --save -dev workbox-webpack-plugin

plugins: [ 
  new WorkboxWebpackPlugin.GenerateSW({
 /* 1. 帮助 serviceworker 快速启动 
    2. 删除旧的 serviceworker生成一个 serviceworker 配置文件~
*/
     clientsClaim: true, 
     skipWaiting: true
  })
 ],

九、多进程打包

npm install -S -D thread-loader
用来处理babel，进程打包，需要放在其他loader之前

module: {
  rules: [ {
    test: /\.js$/, 
    exclude: /node_modules/, 
    use: [ /* 开启多进程打包。 进程启动大概为 600ms，进程通信也有开销。 只有工作消耗时间比较长，才需要多进程打包 */ 
      { 
        loader: 'thread-loader', 
        options: { 
            workers: 2 // 进程 2 个 
        }
      },
      ...//babel loader的配置
    ] 
},

十、externals

利用cdn引入包，拒绝为某些包打包

externals: { // 拒绝 jQuery 被打包进来 
  jquery: 'jQuery'
 }

十一、dll

对某些代码（第三方库：比如jQuery、react、vue）单独打包

npm i -S -D add-asset-html-webpack-plugin

//这些配置一般在webpack.all.config.js文件中配置
plugins: [ 
  // 将某个文件打包输出去，并在 html 中自动引入该资源 new  
   AddAssetHtmlWebpackPlugin({
     filepath: resolve(__dirname, 'dll/jquery.js') 
  })
 ],