Vue CLI2升级至Vue CLI3的方法步骤(2)

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin; module.exports = { ... configureWebpack: { plugins: [ new BundleAnalyzerPlugin() ] }, ... };

然后在 package.json 中添加新的命令:

"analyze": "npm_config_report=true npm run build"

之后,便可以执行以下语句来查看项目编译后文件大小组成了:

npm run analyze

注:采用这种方式后,每次 npm run dev 或 npm run build 都会自动弹出分析页面。

如果不想这么做,可以直接使用如下方式( 无需安装 webpack-bundle-analyzer 依赖 ):

"analyze": "vue-cli-service build --report"

当执行 npm run analyze 后,/dist 文件夹下会生成 report.html 分析报告页面。

10. 引入外部 CDN

我们可以使用 CDN 来加速部分第三方依赖的加载速度,而不是把它们全部打包到一起。

在使用 script 标签引入需要的 .js 文件后,在 vue.config.js 文件增加如下配置:

module.exports = { ... configureWebpack: { externals: { "echarts": "echarts", } }, ... }

即可在需要的地方按如下方式使用了:

import echarts from 'echarts';

11. 忽略编译文件大小限制警告

当执行 npm run build 时,会出现警告信息:

asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).

此时,我们可以在 vue.config.js 中添加如下配置,忽略这条警告信息:

module.exports = { ... performance: { hints: false } ... };

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.heiqu.com/c0f81cf25e718515c4d907b9bda3605f.html