最近實(shí)習(xí)的項(xiàng)目需求上要求不多，就學(xué)了下項(xiàng)目?jī)?yōu)化，主要是首屏加載太慢。

大文件定位

我們可以使用webpack可視化插件Webpack Bundle Analyzer 查看工程js文件大小，然后有目的的解決過大的js文件。

安裝

npm install --save-dev webpack-bundle-analyzer

在webpack中設(shè)置如下，然后npm run dev 的時(shí)候默認(rèn)會(huì)在8888端口顯示。

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;module.exports = { plugins: [  new BundleAnalyzerPlugin() ]}

JS文件按需加載

如果沒有這個(gè)設(shè)置，項(xiàng)目首屏加載時(shí)會(huì)加載整個(gè)網(wǎng)站所有的JS文件，所以將JS文件拆開，點(diǎn)擊某個(gè)頁面時(shí)再加載該頁面的JS是一個(gè)很好的優(yōu)化方法。

這里用到的就是vue的組件懶加載。在router.js中，不要使用import的方法引入組件，使用require.ensure。

import index from '@/components/index'const index = r => require.ensure( [], () => r (require('@/components/index'),'index'))//如果寫了第二個(gè)參數(shù)，就打包到該`/JS/index` 的文件中。//不寫第二個(gè)參數(shù)，就直接打包在`/JS` 目錄下。const index = r => require.ensure( [], () => r (require('@/components/index')))

使用cdn

打包時(shí)，把vue、vuex、vue-router、axios等，換用國內(nèi)的bootcdn 直接引入到根目錄的index.html中。

在webpack設(shè)置中添加externals，忽略不需要打包的庫。

externals: {  'vue': 'Vue',  'vue-router': 'VueRouter',  'vuex': 'Vuex',  'axios': 'axios' } 

在index.html中使用cdn引入。

<script src="https://cdn.bootcss.com/vue/2.2.5/vue.min.js"></script> <script src="https://cdn.bootcss.com/vue-router/2.3.0/vue-router.min.js"></script><script src="https://cdn.bootcss.com/vuex/2.2.1/vuex.min.js"></script> <script src="https://cdn.bootcss.com/axios/0.15.3/axios.min.js"></script>

將JS文件放在body的最后

默認(rèn)情況下，build后的index.html中，js的引入是在header中。

使用html-webpack-plugin插件，將inject的值改成body。就可以將js引入放到body最后。

var HtmlWebpackPlugin = require('html-webpack-plugin');new HtmlWebpackPlugin({   inject: 'body',})

壓縮代碼并移除console

使用UglifyJsPlugin 插件來壓縮代碼和移除console。

new webpack.optimize.UglifyJsPlugin({ compress: {  warnings: false,  drop_console: true,  pure_funcs: ['console.log'] }, sourceMap: false})

暫時(shí)只查到了這幾個(gè)優(yōu)化方法。