vue-cli项目中如何缩短首屏加载时间以提高效率
本篇文章所说的内容是vue-cli项目中如何缩短首屏加载时间以提高效率，代码都非常详细，有需要的朋友可以看一下。
主要是首屏加载太慢。
大文件定位
我们可以使用webpack可视化插件Webpack Bundle Analyzer 查看工程js文件大小，然后有目的的解决过大的js文件。
安装
npm install --save-dev webpack-bundle-analyzer
在webpack中设置如下，然后npm run dev 的时候默认会在8888端口显示。
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
module.exports = {
plugins: [
new BundleAnalyzerPlugin()
]
}JS文件按需加载
如果没有这个设置，项目首屏加载时会加载整个网站所有的JS文件，所以将JS文件拆开，点击某个页面时再加载该页面的JS是一个很好的优化方法。
这里用到的就是vue的组件懒加载。在router.js中，不要使用import的方法引入组件，使用require.ensure。
import index from '@/components/index'
const index = r => require.ensure( [], () => r (require('@/components/index'),'index'))
//如果写了第二个参数，就打包到该`/JS/index` 的文件中。
//不写第二个参数，就直接打包在`/JS` 目录下。
const index = r => require.ensure( [], () => r (require('@/components/index')))使用cdn
打包时，把vue、vuex、vue-router、axios等，换用国内的bootcdn 直接引入到根目录的index.html中。
在webpack设置中添加externals，忽略不需要打包的库。
externals: {
'vue': 'Vue',
'vue-router': 'VueRouter',
'vuex': 'Vuex',
'axios': 'axios'
}在index.html中使用cdn引入。
<script src="//cdn.bootcss.com/vue/2.2.5/vue.min.js"></script>
<script src="//cdn.bootcss.com/vue-router/2.3.0/vue-router.min.js"></script>
<script src="//cdn.bootcss.com/vuex/2.2.1/vuex.min.js"></script>
<script src="//cdn.bootcss.com/axios/0.15.3/axios.min.js"></script>将JS文件放在body的最后
默认情况下，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
})
绛旓細鏈瘒鏂囩珷鎵璇寸殑鍐呭鏄vue-cli椤圭洰涓浣曠缉鐭灞忓姞杞芥椂闂翠互鎻愰珮鏁堢巼锛屼唬鐮侀兘闈炲父璇︾粏锛屾湁闇瑕佺殑鏈嬪弸鍙互鐪嬩竴涓嬨備富瑕佹槸棣栧睆鍔犺浇澶參銆傚ぇ鏂囦欢瀹氫綅鎴戜滑鍙互浣跨敤webpack鍙鍖栨彃浠禬ebpack Bundle Analyzer 鏌ョ湅宸ョ▼js鏂囦欢澶у皬锛岀劧鍚庢湁鐩殑鐨勮В鍐宠繃澶х殑js鏂囦欢銆 瀹夎npm install --save-dev webpack-bundle-ana...
绛旓細鍑忓皬鏈嶅姟鍣ㄥ帇鍔鎸夐渶鍔犺浇涓夋柟璧勬簮锛屽iview,寤鸿鎸夐渶寮曞叆iview涓殑缁勪欢浣跨敤nginx寮鍚痝zip鍑忓皬缃戠粶浼犺緭鐨勬祦閲忓ぇ灏弚ebpack寮鍚痝zip鍘嬬缉鑻ラ灞忎负鐧诲綍椤碉紝鍙互鍋氭垚澶氬叆鍙ｏ紝鐧诲綍椤靛崟鐙垎绂讳负涓涓叆鍙ｄ娇鐢–DN璧勬簮,
绛旓細杩欓噷鎴戜滑鍙互浣跨敤涓涓彃浠锛屽彲浠ュ緢杞绘澗鐨勮В鍐虫帀杩欎釜瀹炴椂鍝嶅簲绛夋瘮缂╂斁鐨勯棶棰橈細 px2rem 鎻掍欢銆傚畨瑁 閰嶇疆 闇瑕佺粨鍚 rem.js 閰嶇疆 鍒拌繖閲岄厤缃畬鎴愬暒锛岀湅涓嬫晥鏋 閰嶇疆鍓 閰嶇疆鍚 鍝囧摝锛屾槸涓嶆槸寰堢畝鍗曪紝鏄笉鏄緢绁炲锛屽皬浼欎即浠刀蹇瘯璇曞惂 ~~ 鐐硅禐 ~~ 杞彂 ~~杩樻湁涓ゆ鎻掍欢锛屽垎鍒负锛 postcss-plu...
绛旓細浠ヤ笅绠鍗曢厤缃紭鍖栧悗鍙彁鍗囨渶灏2鍊嶇殑鏋勫缓閫熷害鎸夐渶寮曠敤鍚敤happypack澶氭牳鏋勫缓椤圭洰淇敼source-map閰嶇疆鍚敤DllPlugin鍜孌llReferencePlugin棰勭紪璇戝簱鏂囦欢瀹炶返1銆佹寜闇寮曠敤1.1鍑犱箮鎵鏈夌殑绗笁鏂圭粍浠舵鏋堕兘浼氭彁渚涚粍浠剁殑 鎸夐渶寮曠敤 鏂瑰紡锛屼互iview涓轰緥锛岄氳繃鍊熷姪鎻掍欢babel-plugin-import 鍙互瀹炵幇鎸夐渶鍔犺浇缁勪欢锛屽噺灏戞枃浠朵綋绉紝鍙...
绛旓細杩欎釜鏂规硶闇瑕3涓弬鏁:瑕佹悳绱㈢殑鏂囦欢澶圭洰褰曘佹槸鍚﹁繕搴旇鎼滅储瀹冪殑瀛愮洰褰曘佷互鍙婁竴涓尮閰嶆枃浠剁殑姝ｅ垯琛ㄨ揪寮忋 鎴戜滑鍦╟omponents鏂囦欢澶规坊鍔犱竴涓彨componentRegister.js鐨勬枃浠,鍦ㄨ繖涓枃浠堕噷鍊熷姪webpack鍔ㄦ佸皢闇瑕佺殑鍩虹缁勪欢缁熺粺鎵撳寘杩涙潵銆 /src/components/componentRegister.jsimport Vue from 'vue'/** * 棣栧瓧姣嶅ぇ鍐...
绛旓細椤圭洰寮鍙戜腑锛屼娇鐢ㄤ簡寰堝渚濊禆鍖咃紝濡 Vue 銆佽矾鐢辩鐞 Vue-router 銆佺姸鎬佺鐞 Vuex 銆乁I缁勪欢搴( ElementUI 銆 Vant )銆佸浘琛紙 echarts 锛夌瓑銆傛墦鍖呮瀯寤猴紝鍙戠幇鏈変竴浜涘寘浣撶Н杩囧ぇ锛屼細褰卞搷棣栭〉鍔犺浇閫熷害銆傚涓嬫墍绀猴細浠庝笂鍥剧殑鍒嗘瀽鍖呬腑锛屽彲浠ュ皢浠ヤ笅鎻掍欢鎶界锛氶渶瑕佸垹闄ょ殑渚濊禆鍖 VueCLI3鑷甫浜 webpack analzer ...
绛旓細锛1锛夊叏灞瀹夎 vue-cli 锛屽湪鍛戒护鎻愮ず绐楀彛鎵ц锛歝npm install -g vue-cli瀹夎vue-cli鍑虹幇浠ヤ笂鎻愮ず琛ㄧずvue-cli姝ｅ父瀹夎鎴愬姛锛屽彲浠ユ寮忓垱寤簐ue-cli宸ョ▼椤圭洰浜嗐傦紙2锛夊畨瑁卾ue-cli鎴愬姛鍚庯紝閫氳繃cd鍛戒护杩涘叆浣犳兂鏀剧疆椤圭洰鐨勬枃浠跺す锛屽湪鍛戒护鎻愮ず绐楀彛鎵ц鍒涘缓vue-cli宸ョ▼椤圭洰鐨勫懡浠わ細vue init webpack鍒涘缓vue-cli宸ョ▼...
绛旓細鍦ㄧ嚎椤圭洰鍦板潃 vue-cli2.x 浣跨敤webpack绫诲瀷鍒涘缓涓涓悕涓簑ebpack-cdn-demo鐨vue椤圭洰銆傚鏋滃畨瑁呯殑vue-cli鏄3.x鐗堬紝鍛戒护浼氭湁鎵涓嶅悓銆傝鍙傝vue-cli3浜嗚В璇︾粏淇℃伅銆傚畨瑁呬緷璧栨 鍚姩涓涓」鐩 涓嬮潰绠鍗曚粙缁嶄竴涓嬬洰褰曠粨鏋勩俠uild鏂囦欢澶逛腑鐨剋ebpack.prod.conf.js鏄垜浠殑涓绘枃浠讹紝鎴戜滑鍦ㄥ叾涓姩鎬佽缃笉闇瑕佹墦鍖...
绛旓細涓銆侀厤缃vue-cli3.0鐨剉ue.config.js鏂囦欢锛屽彲浠ラ氳繃淇敼璇ユ枃浠舵潵瀹氬埗Vue椤圭洰鐨勯厤缃備簩銆1. vue.config.js鐨勪綔鐢細vue.config.js鏄疺ue CLI椤圭洰涓鐨勬牳蹇冮厤缃枃浠讹紝鐢ㄤ簬瀵箇ebpack杩涜娣卞眰閰嶇疆浠ュ強瀵归」鐩叾浠栧姛鑳界殑鑷畾涔夎缃2. 閰嶇疆鏂囦欢鐨勫垱寤猴細鍦ㄩ」鐩牴鐩綍涓嬶紝濡傛灉娌℃湁vue.config.js鏂囦欢锛屽垯闇瑕佹墜鍔...
绛旓細webpack鎻愪緵浜嗙敓浜х幆澧冨拰绾夸笂鐜鐨勪袱绉嶉厤缃枃浠,骞虫椂寮鍙戝綋涓娇鐢ㄤ竴涓帴鍙,椤圭洰涓婄嚎鍚庡氨浼氳嚜鍔ㄥ垏鎹㈡垚鍙﹀涓涓帴鍙,搴熻瘽涓嶅璇,涓嬮潰涓婂浘銆傞鍏堟槸鎵惧埌vue-cli椤圭洰涓config鏂囦欢澶逛笅鐨刣ev.env.js,榛樿鏄笅闈㈢殑鏍峰瓙:鐒跺悗鎴戜滑闇瑕佹坊鍔犲紑鍙戠幆澧冧腑浣跨敤鐨勮姹傚悗鍙版暟鎹殑鎺ュ彛鍩熷悕,濡備笅鍥:url_api鏄垜鑷繁璁剧疆鐨,...
