这是因为 3.x 版本默认使用的是运行时模式,需要对 main.js
文件进行修改:
new Vue({ router, store, render: h => h(App) }).$mount('#app');
将其改为上述方式即可。
8. 配置 lodash 使其模块化加载
在项目中,如果使用如下方式引入 lodash:
import _ from 'lodash';
那么,即使只使用了其中的 _.get()
方法,也会将全部的 lodash 依赖压缩到 .js 文件中。这不是我们期望的。
此时,我们可以通过如下方式,使其能够在这种引入方式下,也能自动实现模块加载:
首先,安装如下依赖:
npm install babel-plugin-lodash --save-dev
然后在 babel.config.js
中添加如下内容:
module.exports = { ... plugins: [ 'lodash' ] ... };
9. 配置 analyzer
我们可以使用 analyzer 分析项目编译后的文件组成,以便进行加载速度优化。
首先安装依赖:
npm install webpack-bundle-analyzer --save-dev
然后在 vue.config.js
中添加如下配置:
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 } ... };
声明:本网页内容旨在传播知识,若有侵权等问题请及时与本网联系,我们将在第一时间删除处理。TEL:177 7030 7066 E-MAIL:11247931@qq.com