很多用Vue開發的專案中，都會遇到首屏載入慢，chunk-vendor.js動不動就好幾MB，那麼如何通過Vue的內部配置去優化我們的Vue專案呢？

這是手頭的一個專案，同樣的原始碼，同樣的伺服器，打開了Disable cache，目前完全載入是6.82秒

優化後，載入時間才2.59秒，提升了60%的載入

其實出發點還是比較好理解的，壓縮js和使用CDN

因為我這邊用的Linux伺服器，然後安裝的寶塔，使用的Nginx，預設是開啟了Gzip，所以我們可以先安裝compression-webpack-plugin

yarn add compression-webpack-plugin或者npm install compression-webpack-plugin

然後，我們在vue.config.js中做如下的配置

const CompressionWebpackPlugin = require('compression-webpack-plugin')module.exports = { productionSourceMap: false, configureWebpack: config => { if (isProduction) { // 開啟gzip壓縮 config.plugins.push(new CompressionWebpackPlugin({ algorithm: 'gzip', test: /\\.js$|\\.html$|\\.json$|\\.css/, threshold: 10240, minRatio: 0.8 })) } }}

這樣，Gzip就可以在打包的時候生成了，如下圖，打包前後體積還是很明顯的，但是這樣是不夠的

為了防止檔案過大，我們先把公共程式碼分離

config.optimization = { runtimeChunk: 'single', splitChunks: { chunks: 'all', maxInitialRequests: Infinity, minSize: 20000, cacheGroups: { vendor: { test: /[\\\\/]node_modules[\\\\/]/, name(module) { const packageName = module.context.match(/[\\\\/]node_modules[\\\\/](.*?)([\\\\/]|$)/)[1] return `npm.${packageName.replace('@', '')}` } } } }}

打包後的效果，如下圖

那麼，在最後就是用CDN

這裡就引入一個vue.js作為例子

config.externals = { vue: 'Vue'}

需要在你的public/index.html的body標籤中引用對應版本的vue.js

然後整體打包，ok，附上完整的vue.config.js

const path = require('path')const CompressionWebpackPlugin = require('compression-webpack-plugin')const appname = 'index'function resolve(dir) { return path.join(__dirname, dir)}const isProduction = process.env.NODE_ENV === 'production'// vue.config.jsmodule.exports = { productionSourceMap: false, outputDir: appname + 'OutPutFile', // 執行時生成的生產環境構建檔案的目錄(預設""dist""，構建之前會被清除) assetsDir: appname + 'public', //放置生成的靜態資源(s、css、img、fonts)的(相對於 outputDir 的)目錄(預設"") indexPath: appname + '.html', //指定生成的 index.html 的輸出路徑(相對於 outputDir)也可以是一個絕對路徑。 configureWebpack: config => { if (isProduction) { // 開啟gzip壓縮 config.plugins.push(new CompressionWebpackPlugin({ algorithm: 'gzip', test: /\\.js$|\\.html$|\\.json$|\\.css/, threshold: 10240, minRatio: 0.8 })) config.optimization = { runtimeChunk: 'single', splitChunks: { chunks: 'all', maxInitialRequests: Infinity, minSize: 20000, cacheGroups: { vendor: { test: /[\\\\/]node_modules[\\\\/]/, name(module) { const packageName = module.context.match(/[\\\\/]node_modules[\\\\/](.*?)([\\\\/]|$)/)[1] return `npm.${packageName.replace('@', '')}` } } } } } config.performance = { hints: 'warning', //入口起點的最大體積 maxEntrypointSize: 50000000, //生成檔案的最大體積 maxAssetSize: 30000000, //只給出 js 檔案的效能提示 assetFilter: function(assetFilename) { return assetFilename.endsWith('.js') } } config.externals = { vue: 'Vue' } } }, chainWebpack: (config) => { config.resolve.alias .set('@$', resolve('src')) .set('@api', resolve('src/api')) .set('@assets', resolve('src/assets')) .set('@comp', resolve('src/components')) .set('@views', resolve('src/views')) .set('@layout', resolve('src/layout')) .set('@static', resolve('src/static')) }, css: {   }, lintOnSave: undefined}

最後的一點建議，如果條件允許，能走cdn儘量走cdn，效果還是比較驚人的。