首先上結果：

把常用的 Vue，router，vuex，axios 的 runtime 包拆分了出來，改為 cdn；

另外就是對于自己編寫的業務代碼進行分包，根據路由進行懶加載，可以較好的提高首屏加載速度。

添加了全局 loading 來提高體驗。

優化前，可以看出包含了不少的runtime包

經過優化體積大幅減小不出意外core-js也可以改成CDN

配合靜態資源的CDN加速，目前首頁的速度大概是700ms，除了圖片外加載的速度大概是200ms左右

abandon.work?abandon.work

CDN 優化

CDN 優化是在 webpack 中實現的，主要分為環境切換，webpack 打包技巧和 html-webpack-plugin配置三個部分。

這部分的代碼可以點擊這個鏈接

環境切換

通過process.env.NODE_ENV來切換環境，因為在 dev 環境的時候，最好還是使用本地包，方便 debug 等，在生產環境的時候才需要添加 CDN.

本項目的vue.config.js中就是這樣安排的，這樣就可以在不同環境對 webpack 進行配置，類似于vue-cli2的配置類型：

# cli 2 webpack.dev.js webpack.prod.js

本項目中;

if (process.env.NODE_ENV === 'production') {webpackConfig['chainWebpack'] = config => {config.plugin('html').tap(args => {args[0].cdn = cdn;return args;});};webpackConfig['configureWebpack'] = config => {config['externals'] = {vue: 'Vue',vuex: 'Vuex','vue-router': 'VueRouter',axios: 'axios',};config['plugins'].push(new BundleAnalyzerPlugin());}; }module.exports = webpackConfig;

具體操作涉及vue/cli3+的配置，具體可以看這里;
對于configureWebpack， 有配置式和函數式，當使用函數式的時候，添加插件的方法可以看上面的片段，這是官方文檔里面沒有的。

打包技巧

那么該怎么設置 cdn 呢？

這里需要兩個 webpack 的配置項：

webpack.externals

webpack.plugins.html-webpack-plugin
具體也可以看代碼，主要的思路就是在區分環境的基礎上，在生產環境將需要 cdn 的包放在webpack.externals里面：

webpackConfig['configureWebpack'] = config => {config['externals'] = {vue: 'Vue',vuex: 'Vuex','vue-router': 'VueRouter',axios: 'axios',}; };

接著就是操作 plugin，這里選擇鏈式操作，將需要填入的 cdn 連接的內容傳給index.html模板：

let cdn = {js: [// 可以寫成動態版本號'//cdn.bootcss.com/vue/2.6.10/vue.runtime.min.js','//cdn.bootcss.com/vue-router/3.1.3/vue-router.min.js','//cdn.bootcss.com/vuex/3.1.2/vuex.min.js','//cdn.bootcss.com/axios/0.19.0/axios.min.js',], }; webpackConfig['chainWebpack'] = config => {config.plugin('html').tap(args => {args[0].cdn = cdn;return args;}); };

html-plugin 配置

上述的配置完成之后，需要在public/inedx.html中修改一下：

<div id="app"></div> <% if(process.env.NODE_ENV==='production'){htmlWebpackPlugin.options.cdn.js.forEach(function(item){ if(item){ %> <script type="text/javascript" src="<%= item %>"></script> <% }})} %> <!-- built files will be auto injected -->

這個的目的就是當是生產環境的時候，遍歷生成 CDN 的元素。這是一個模板語法，可以看看html-webpack-plugin

參考文章

webpack 使用 HtmlWebpackPlugin 進行 cdn 配置

vue 打包優化

在 vue-cli 3.0 中根據不同環境動態注入 CDN

webpack-cdn-plugin

webpack4 配置的最佳實踐

路由懶加載優化

這里主要是根據官方文檔的實踐：
結合 Vue 的異步組件和 Webpack 的代碼分割功能，輕松實現路由組件的懶加載。

// src/router/index.js // 路由懶加載 博客分塊 const Blog = () => import(/* webpackChunkName: "group-blog" */ '../views/Blog/Blog.vue'); const ContentPage = () => import(/* webpackChunkName: "group-blog" */ '../views/Blog/ContentPage.vue');

loading 插件

為了美化加載的過程，自定義一個Loading插件，主要參考了這些文章

選擇了一個蠻炫酷的動效

功能：

• 單例模式
• 可以在axios攔截器中使用

寫在最后

希望大家可以多多關注我的abandon.work，一個nest.js+mongoDB+Vue.js的小站。

總結

以上是生活随笔為你收集整理的cdn加载vue很慢_Vue.js 项目打包优化实践的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。