国产精品吹潮在线播放,日韩一区二区三区在线播放,啊级免费黄片视频,66av视频

　　很多用Vue開發(fā)的項目中，都會遇到首屏加載慢，chunk-vendor.js動不動就好幾MB，那么如何通過Vue的內(nèi)部配置去優(yōu)化我們的Vue項目呢?這是手頭的一個項目，同樣的源碼，同樣的服務(wù)器，打開了Disable cache，目前完全加載是6.82秒

優(yōu)化后，加載時間才2.59秒，提升了60%的加載

其實出發(fā)點還是比較好理解的，壓縮js和使用CDN因為我這邊用的Linux服務(wù)器，然后安裝的寶塔，使用的Nginx，默認是開啟了Gzip，所以我們可以先安裝compression-webpack-pluginyarn 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標簽中引用對應(yīng)版本的vue.js

然后整體打包，ok，附上完整的vue.config.jsconst 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', // 運行時生成的生產(chǎn)環(huán)境構(gòu)建文件的目錄(默認""dist""，構(gòu)建之前會被清除) assetsDir: appname + 'public', //放置生成的靜態(tài)資源(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，效果還是比較驚人的。