所以我只是试图通过webpack-bundle-analyzer结果寻找应该节食的东西并更深入地了解 CLI 构建过程(CLI v6.1.5、Angular v6.1.8)并改进我们的实例。
ng build
当我浏览我看到的供应商捆绑包时,我注意到这只是一般情况;
var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;/*!
* jQuery JavaScript Library v3.2.1
不幸的是,它作为整个 jquery.js 文件在 260k+ 时没有缩小,但是我也在脚本包中找到了它;
/*! jQuery v3.2.1 | (c)
考虑到我在脚本数组中明确声明了它,这是我期望的缩小文件版本angular.json
所以我想如果我把它移到tsconfig.json
作为模块路径;
"paths": {
"jquery": ["./node_modules/jquery/dist/jquery.min.js"],
}
然后它应该选择最小版本并像我对其他人所做的那样从供应商那里剥离另一个。它确实,构建得很好,我看到了大小差异,jquery.js 从供应商包中消失了....但是,我记得这样的模块上没有 typeroot,所以当我去 init 时,我得到了一大堆error TS2304: Cannot find name '$'
错误. import * as $ from 'jquery'
哪一个,如果我可以避免它,我真的不想全部声明,而且我在angular.json
一些我没有使用过的 jquery-ui 库的同一路径中有一个依赖项;
"scripts": [
"./node_modules/jquery/dist/jquery.min.js",
"./vendor_scripts/jquery-ui/jquery-ui.min.js",
.....
如果我只是省略 jquery.min.js 路径,那么我就完蛋ReferenceError: $ is not defined
了。
所以我继承的这个构建过程中的一些东西是不合时宜的,我希望有人能教我一些东西。如何避免重复的脚本来节食捆绑包,以及如何确保以正确的方式尊重我的类型/环境声明?无论哪种方式都为阅读而欢呼!