前言

在webpack 进行分包前如果使用externals,会在html页面生成多个script链接，如果后面还有redux,react-redux，这些基础包都会通过script单独加在html页面中

new HtmlWebpackExternalsPlugin({
        externals: [{
            module: 'react', entry: 'cdn地址’, global:'React',
            module: 'react-dom', entry: 'cdn地址’, global:'ReactDOM'
        }]
    })

如果使用optimization.splitChunks 这个在每次提取基础包还是需要耗费构建时间

那有没有更好的方案了其实我们可以使用预编译资源模块只需要预编译一次，后面的基础包时间都可以省略掉

使用

webpack.config.dll.js 使用DllPlugin进行分包

let path = require('path')
let webpack = require('webpack')

module.exports = {
    mode:'production',
    // context: process.cwd(),
    // resolve: {
    //     extensions: ['.js','.jsx','.json','.less','.css'],
    //     modules:[__dirname, 'node_modules']
    // },
    entry: {
        library: [
            'react', 
            'react-dom'
        ]
    },
    output: {
        filename: '[name].dll.js',  // 产生的文件名
        path: path.join(__dirname, 'dist/library'),
        library: '[name]',     // 给输出的结果加个名字
    },
    plugins: [
       new webpack.DllPlugin({
           name: '[name]',   // name === library
           path: path.resolve(__dirname, 'dist/library/[name].json')  // manifest.json 定义了各个模块的路径
       })
    ]
}

在package.json 中加入执行链接

"scripts": {
    "eslint": "eslint ./lib --fix",
    "dll":"webpack --config webpack.config.dll.js",
    ....
}

执行命令 npm run dll

在dist目录下生成文件

在webpack.config.js 使用DllReferencePlugin对library.json引用

const config = {
  ...,
  output: {
    path: path.join(projectRoot, 'dist'),
    filename: 'js/[name]_[chunkhash:8].js',
    clean: {
      keep: /library\// // 保留 'dist/library' 下的静态资源
    },
  },
  plugins: [
     new webpack.DllReferencePlugin({
      manifest: require('./dist/library/library.json')
    }),
  ]
}

执行npm run dev

 DONE  Compiled successfully in 1383ms                                                                                                           下午6:05:46

assets by status 11 KiB [cached] 2 assets
assets by status 77 KiB [emitted]
  assets by path js/*.js 76.2 KiB
    asset js/runtime_b230fa0e.js 47.4 KiB [emitted] [immutable] (name: runtime) 1 related asset
    asset js/search_5cd5baf8.js 28.1 KiB [emitted] [immutable] (name: search) 1 related asset
    asset js/src_search_text_js_3db03168.js 775 bytes [emitted] [immutable] 1 related asset
  assets by status 784 bytes [compared for emit]
    asset search.html 422 bytes [emitted] [compared for emit]
    asset index.html 362 bytes [emitted] [compared for emit]

引用的search.js文件已经将react 文件拿出去了未使用分包前执行npm run dev,可以看到search文件有1.11M

assets by status 11 KiB [cached] 2 assets
assets by status 1.16 MiB [emitted]
  assets by path js/*.js 1.16 MiB
    asset js/search_d92b1a37.js 1.11 MiB [emitted] [immutable] [big] (name: search) 1 related asset
    asset js/runtime_c210059e.js 47.7 KiB [emitted] [immutable] (name: runtime) 1 related asset
    asset js/src_search_text_js_d4d80e80.js 927 bytes [emitted] [immutable] 1 related asset
  assets by status 784 bytes [compared for emit]
    asset search.html 422 bytes [emitted] [compared for emit]

在html 文件中将基础包单独引入进去

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="root"></div>
    <script src="/library/library.dll.js"></script>
</body>
</html>

webpack.DllPlugin分包

前言

使用