在webpack打包时,第三方库的引用会降低打包速度,而且在打包后资源过大,发布上线后,资源加载慢。这时可以考虑把第三方库抽离出来。
步骤:
1,读取package.json下依赖的第三方库,作为webpack.dll.config的入口文件,配置如下:
output: {
path: path.resolve(__dirname, "../src/static/"),
filename: "[name].js",
library: "[name]",
},
entry: {
vendor: vendors,
},
plugins: [
// 代码混淆
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
}
}),
new webpack.DefinePlugin({
"process.env": {
"NODE_ENV": JSON.stringify("production")
}
}),
new webpack.DllPlugin({
path: "dll/manifest.json",
name: "[name]",
context: path.resolve(__dirname, "../"),
}),
],
2,执行打包后将vendors列表,写入配置文件pkg.vendors.config.js,在第二次执行时,判断配置文件pkg.vendors.config.js和package.json下的dependencies是否相等,若相等,跳过
var packagePath = path.resolve(__dirname, './pkg.vendors.config.json');
console.log('packagePath',packagePath)
if(!fs.existsSync(packagePath) ){
fs.writeFileSync(packagePath,
JSON.stringify({})
)
}
var pkgVendorsConfig = JSON.parse(fs.readFileSync(packagePath));
var vendors = util.getVendors(); //获取第三方库(package.json)
if (!pkgVendorsConfig.dependencies || !list_equal(pkgVendorsConfig.dependencies, vendors)) {
console.log('run `webpack --config config/webpack.dll.js --progress`......');
var ps = exec('webpack --config config/webpack.dll.js --progress'),
buffer = '';
ps.stdout.on('data', function(data) {
buffer += data;
process.stdout.write(data);
});
ps.stderr.on('data', function(data) {
buffer += data;
process.stdout.write(data);
});
ps.on('exit', () => {
if (buffer.indexOf('ERROR in dll lib') >= 0) {
console.error('=====error occured,stop start server!!!=====');
return;
} else {
illidanCfg.dependencies = vendors;
fs.writeFileAsync(packagePath, JSON.stringify(illidanCfg, null, ' '));
}
}
3, build时配置插件DllReferencePlugin
new webpack.DllReferencePlugin({
context: path.resolve(__dirname, "../"),
manifest: require("../dll/manifest.json"),
}),