Webpack打包优化

 

开发环境

1.热模块替换HMR

优化开发环境加载速度。正常情况下，开发环境修改了某一模块代码，运行时，会重新加载所有css资源以及js资源。开启HMR功能之后，在一个源码发生改变时，只重新编译发生变化的模块，再利用新输出的模块替换老模块。

配置方式

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

2.Source-Map

方便代码调试。源代码与压缩代码之间的映射关系。

配置方式

  devServer:{
    contentBase:resolve(__dirname,'build'),
    compress:true,
    port:3000,
    hot:true
  },
  devloop:"eval-source-map"

生产环境

3.缓存

3.1.babel缓存

构建速度更快，第二次构建时直接读取之前缓存。在babel-loader中配置cacheDirectory为true。

      {
        test: /\.js/,
        exclude: /node_modules/,
        loader: "babel-loader",
        options: {
          presets: [
            [
              "@babel/preset-env",
              {
                useBuiltIns: "usage",
                corejs: {
                  version: 3
                },
                targets: {
                  chrome: "60",
                  ie: "8"
                }
              }
            ]
          ],
          // 开启babel缓存
          cacheDirectory: true
        }
      }

3.2文件资源缓存

给文件名加上hash值

hash：Chunk的唯一标识hash值。

chunkhash：Chunk内容的hash值，若打包来源于同一个chunk，hash值就一致

contentHash：根据文件内容生成的hash值。使用contenthash实现文件资源缓存。

//js
output: {
    filename: "js/buildt[contentHash:10].js",
    path: resolve(__dirname, "build")
}

//css 安装mini-css-extract-plugin
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
new MiniCssExtractPlugin({
      // 单独抽离样式文件
   filename: "css/built[contentHash:10].css"
}),

4.Code Split

代码分隔实现按需加载。

方式一：

import语句

  // './test'为引入的js文件路径，import语句会以./test.js为入口重新生成一个Chunk，import返回一个Promise对象
  //webpackChunkName指定输出文件名
  import(/*webpackChunkName:"test"*/'./test').then(()=>{
    // do something
  })

方式二：

多入口配置

entry: {
    main: "./src/js/index.js",
    test: "./src/js/test.js" 
  }

5.tree-shaking树摇

去除应用中没有使用的代码

使用条件:1.必须使用ES6模块化

                2.开启production环境

6.渐进式网络开发应用程序PWA

离线可访问，基于workbox，workbox-webpack-plugin插件。serviceWork必须运行在服务器上。