时间：2021-08-12 09:30:52 | 栏目：AngularJS | 点击：次
webpack-ng-dll-plugin
用途
使用
第一个是官方的,后两个是第三方的,但是确认你有练过之前,请不要选择官方的...
作者在测试的时候选择的是@angular-builders/custom-webpack
引用就是webpack的正常引用插件就ok了
尝鲜
下面的函数过滤了index.html,styles,polyfills,License的输出,并且禁用了runtimeChunk
setNgDllPlugin(
config,
{
//webpack 的out相关配置
output: {
filename: 'dll.js',
},
ngDllPluginOptions: {
// dll的资源清单导出配置
path: path.join(__dirname, 'dist', 'manifest.json'),
name: 'TLIB',
format: true,
filter: {
// 过滤模式,full全量,auto相对于项目,manual 手动指定过滤项(需要设置map)
mode: 'auto',
},
},
},
options
);
自定义
相关配置需要参考(暂时没写文档,需要查看源码)
config.plugins.push(new NgDllPlugin(option.ngDllPluginOptions));
引用
// 这里的context可以理解为代码(应用代码)相对于哪个文件夹解析(不是打包出来的dll.js,如果正确引用,你会发现把dll.js删掉,也不会影响打包),如果发现打包出来的东西没有使用这个,应该就是这个配置错了
config.plugins.push(
new webpack.DllReferencePlugin({
context: path.resolve(__dirname),
manifest: require('./dist/manifest.json'),
})
);
演示地址
https://github.com/wszgrcy/ng-cli-plugin-demo
可能解锁的技术
正常情况下,哪怕是动态加载的路由,也是与项目一同打包,只不过是打包为两个文件
主体项目先打包,然后再单独开发懒加载路由模块
虽然ng已经实现了这个,但是由于每次一大包,就相当于打了一个单独项目,非常庞大,使用dll后则会缩小到一个可怕的程度,副作用接近0
目前(可能)存在的问题
没修改之一主要是影响不大,加上调试需要
dll在设计的时候根本没考虑过动态模块之类的东西,完全就是只打一个大包
尽量使用空项目生成dll
其实如果项目代码足够多(各种种类),修改代码是不影响的,但是比如有些引入第一次使用,或者html模板中使用了一些新的东西,都需要重新构建
待改进
主动排除一部分永远无法使用的导出
为什么dll比直接打包大
目前用空项目生成出的dll(包括rxjs,router,common,core),全量暴力是440k(也就是说当其他包使用时这些文件都会在dll中查找),选择性导出最小化启动在216k作用,最终估计应该平均在300k左右
后期,其实可以整理一个永不导出的列表,进行排除,从而减小体积
总结