Vue CLI2升級至Vue CLI3的方法步驟

這是因為 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