提取页面公共资源

基础库分离

思路：将react、react-dom基础包通过cdn引入，不打入最终代码中

方法：使用html-webpack-externals-plugin

使用：

const HtmlWebpackExternalsPlugin = require("html-webpack-externals-plugin");

plugins: [new HtmlWebpackExternalsPlugin({
    externals: [
        {
            module: "react",
        	entry:"https://unpkg.com/react@17/umd/react.production.min.js",
            global: "React"
        },
        {
           module: "react-dom",
           entry:"https://unpkg.com/react-dom@17/umd/react-dom.development.js",
           global: "ReactDOM" 
        }
    ]
})]

利用SplitChunksPlugin进行公共脚本分离

webpack4内置的，代替CommonsChunkPlugin插件

插件说明：https://webpack.js.org/plugins/split-chunks-plugin/

module.exports = {
  //...
  optimization: {
    splitChunks: {
      chunks: 'async',
      minSize: 20000,
      minRemainingSize: 0,
      maxSize: 0,
      minChunks: 1,
      maxAsyncRequests: 30,
      maxInitialRequests: 30,
      automaticNameDelimiter: '~',
      enforceSizeThreshold: 50000,
      cacheGroups: {
        defaultVendors: {
          test: /[\\/]node_modules[\\/]/,
          priority: -10
        },
        default: {
          minChunks: 2,
          priority: -20,
          reuseExistingChunk: true
        }
      }
    }
  }
};

chunks参数说明：

• async 异步引入的库进行分离（默认）
• initial 同步引入的库进行分离
• all 所有引入的库进行分离（推荐）

minSize/maxSize参数说明:

• 抽离的公共包最小的大小（minSize）
• 抽离的公共包最大的大小（maxSize）
• 单位为字节

minChunks：一个方法被多个页面调用，超过设置的该值就会提取出一个单独的文件

function test() {

​ console.log("test")

}

A页面：test();

B页面：test();

如果这个参数设置为2，就会提取出一个单独的文件出来，设置为3就不会

maxInitialRequests：浏览器同时请求分离出来的文件最多多少个

提取react和react-dom

配置

optimization: {
       splitChunks: { 
           cacheGroups: {
           		commons: {
                      test: /(react|react-dom)/,
                      name: "vendors",
                      chunks: "all"
           		}, 
      	   },
       }
}

说明

• test: 匹配需要提取的资源
• name：提取出来的文件
• chunks：提取的模式

提示

如果提取出的文件并没有被html文件引入，那么可能还需要下面这一步操作,将vendors添加到HtmlWebpackPlugin插件中

new HtmlWebpackPlugin({
    template: path.join(__dirname,`src/${pageName}/index.html`),
    filename: `${pageName}.html`,
    chunks: ["vendors", pageName],
    inject: true,
    minify: {
           html5: true,
           conllapseWhitespace: true,
           preserveLineBreaks: false,
           minifyCSS: true,
           minifyJS: true,
           removeComments: false,
    },
})

普通方法提取

optimization: {
       splitChunks: { 
           minSize: 0,
           cacheGroups: {
           		commons: { 
                      name: "commons",
                      chunks: "all",
                      minChunks: 2
           		}, 
      	   },
       }
}

说明

• minSize: 提出的文件至少要多大
• name：提出来的文件名称
• chunks：提取规则
• minChunks：至少多少个文件引入
• 这里面可能包含react内容，因为react也同样被引入了两次以上，所以文件很大，还有可能受到tree shaking的影响，没有使用，直接没有看到打包内容，这一点下一章内容会有说明