国产chinesehd精品酒店,邱淑贞aa极毛片,国产在线色视频,玖玖爱zh综合伊人久久

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

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

其實(shí)出發(fā)點(diǎn)還是比較好理解的，壓縮js和使用CDN因?yàn)槲疫@邊用的Linux服務(wù)器，然后安裝的寶塔，使用的Nginx，默認(rèn)是開啟了Gzip，所以我們可以先安裝compression-webpack-pluginyarn add compression-webpack-plugin或者npm install compression-webpack-plugin

　　然后，我們?cè)趘ue.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就可以在打包的時(shí)候生成了，如下圖，打包前后體積還是很明顯的，但是這樣是不夠的

為了防止文件過(guò)大，我們先把公共代碼分離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這里就引入一個(gè)vue.js作為例子config.externals = { vue: 'Vue'}

　　需要在你的public/index.html的body標(biāo)簽中引用對(duì)應(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', // 運(yùn)行時(shí)生成的生產(chǎn)環(huán)境構(gòu)建文件的目錄(默認(rèn)""dist""，構(gòu)建之前會(huì)被清除) assetsDir: appname + 'public', //放置生成的靜態(tài)資源(s、css、img、fonts)的(相對(duì)于 outputDir 的)目錄(默認(rèn)"") indexPath: appname + '.html', //指定生成的 index.html 的輸出路徑(相對(duì)于 outputDir)也可以是一個(gè)絕對(duì)路徑。 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', //入口起點(diǎn)的最大體積 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}

　　最后的一點(diǎn)建議，如果條件允許，能走cdn盡量走cdn，效果還是比較驚人的。