0%

Web构建优化

概要内容

  • DllPlugin 和 DllReferencePlugin 简介
  • 如何使用DllPlugin打包,及DllReferencePlugin如何引用dll
  • 构建优化效果
  • SplitChunks
  • Demo源码工程

DllPlugin 和 DllReferencePlugin 简介

  • DllPlugin:

    这个插件是在一个额外的独立的 webpack 设置中创建一个只有 dll 的 bundle(dll-only-bundle)。 这个插件会生成一个名为 manifest.json 的文件,这个文件是用来让 DLLReferencePlugin 映射到相关的依赖上去的。

  • DllReferencePlugin:

    此插件配置在 webpack 的主配置文件中,此插件会把 dll-only-bundles 引用到需要的预编译的依赖中

  • 通俗点讲:

    DllPlugin 插件负责把第三方公共库,打包进一个独立的dll库中。最后项目打包时DllReferencePlugin 通过manifest.json 来引用dll的公共库,避免项目每次构建时都将第三库和业务代码进行重复打包。

  • 优点:
    • 提升打包构建速度
    • 公共js文件配置CDN,避免掉重复下载公共库js文件

如何使用DllPlugin打包,及DllReferencePlugin如何引用dll

  • DllPlugin 配置需要打包第三方库至dll中
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
//webpack.dll.config.js

const DllPlugin = require('webpack/lib/DllPlugin');
const path = require('path')
const fs = require('fs');

var packageJsonContent = fs.readFileSync(path.resolve(__dirname, '../package.json'));
var packageJson = JSON.parse(packageJsonContent);

var dependencies = Object.keys(packageJson.dependencies);

module.exports = {
entry: {
vendor: dependencies
},
output: {
path: path.resolve(__dirname, '../dist'),
filename: 'vendor.bundle.js',
library: 'vendor_lib'
},
plugins: [
new DllPlugin({
context: __dirname,
name: 'vendor_lib',
/* 生成manifest文件输出的位置和文件名称 */
path: path.resolve(__dirname, '../dist/vendor-manifest.json')
})
],
}

  • DllReferencePlugin如何引用dll
1
2
3
4
5
//webpack.config.js 中 plugins添加以下代码

new DllReferencePlugin({
manifest: require(path.resolve(__dirname, '../dist/vendor-manifest.json'))
}),

构建优化效果

简单demo,未抽离公共库打包时间7572ms,抽离公共库打包时间2315ms,打包速度快2倍多


SplitChunks

  • 简介:Webpack中一个提取或分离代码的插件,主要作用是提取公共代码,防止代码被重复打包,拆分过大的js文件,合并零散的js文件,可配置
  • 配置:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
//webpack.dll.config.js中optimization 中新增如下配置
splitChunks: {
chunks: "async",
minSize: 30000,
minChunks: 1,
maxAsyncRequests: 5,
maxInitialRequests: 3,
automaticNameDelimiter: '~',
name: true,
cacheGroups: {
vendors: {
test: /[\\/]node_modules[\\/]/,
priority: -10
},
default: {
minChunks: 2,
priority: -20,
reuseExistingChunk: true
}
}
}

Demo源码工程


最后:

由于对于公共库抽离和分割包过大优化打包,我只是试探性的去了解和测试。如果你还有什么更好的优化构建方法或者建议,欢迎给我留言。感谢~


参考文献

以上: 如发现有问题,欢迎留言指出,我及时更正

如何文章对你有益,请给我买杯豆浆喝