<body> <div></div> <!-- built files will be auto injected --> <script src="<%= webpackConfig.output.publicPath %>spa/js/vendor.dll.js"></script> //添加这句，路径可根据所需修改 </body>
四、在package.json里打包dll添加命令
"build:dll": "webpack --config build/webpack.dll.conf.js"
五、命令顺序
npm run build:dll //打包一次之后依赖库无变动不需要执行 npm run build
优点
Dll打包以后是独立存在的，只要其包含的库没有增减、升级，hash也不会变化，因此线上的dll代码不需要随着版本发布频繁更新。
App部分代码修改后，只需要编译app部分的代码，dll部分，只要包含的库没有增减、升级，就不需要重新打包。这样也大大提高了每次编译的速度。
假设你有多个项目，使用了相同的一些依赖库，它们就可以共用一个dll。
19s->15s
设置 babel 的 cacheDirectory 为true
在webpack.base.conf.js中修改babel-loader：
loader: 'babel-loader?cacheDirectory=true',
15s->14s
设置 noParse
如果你确定一个模块中，没有其它新的依赖，就可以配置这项， Webpack 将不再扫描这个文件中的依赖，这对于比较大型类库，将能促进性能表现，具体可以参见以下配置：
module: { noParse: /node_modules\/(element-ui\.js)/, rules: [ { ... } } happypack
加上后没太大的效果，可能用法有问题，有待深入尝试
以上这篇vue-cli webpack2项目打包优化分享就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
您可能感兴趣的文章: