vue——项目优化，缩短首屏加载时间

浅浅的花香味﹌ 2021-11-04 14:32 457阅读 0赞

在Vue项目中，引入到工程中的所有js、css文件，编译时都会被打包进vendor.js，浏览器在加载该文件之后才能开始显示首屏。若是引入的库众多，那么vendor.js文件体积将会相当的大，影响首屏的体验。

解决方法是，将引用的外部js、css文件剥离开来，不编译到vendor.js中，而是用资源的形式引用，这样浏览器可以使用多个线程异步将vendor.js、外部的js等加载下来，达到加速首开的目的。

外部的库文件，可以使用CDN资源，或者别的服务器资源等。

下面来介绍几种方式：   
1.大文件定位   
我们可以使用webpack可视化插件Webpack Bundle Analyzer 查看工程js文件大小，然后有目的的解决过大的js文件。   
安装

npm install --save-dev webpack-bundle-analyzer  
  
在webpack中设置如下，然后npm run dev的时候会默认在浏览器上打开

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

module.exports = \{  
  plugins: \[  
    new BundleAnalyzerPlugin()  
  \]  
\}

2.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')))  
   
3.将JS文件放在body的最后   
默认情况下，build后的index.html中，js的引入实在是在head中，使用html-webpack-plugin插件，将inject的值改为body。就可以将js引入放到body最后。

var HtmlWebpackPlugin = require('html-webpack-plugin');  
new HtmlWebpackPlugin(\{  
    inject:'body'  
\})  
   
4.使用cdn   
打包时，把vue、vuex、vue-router、axios等，换用国内的bootcdn直接引入到根目录的index.html。   
在webpack设置中添加externals，忽略不需要打包的库。

module.exports = \{  
  context: path.resolve(\_\_dirname, '../'),  
  entry: \{  
    app: './src/main.js'  
  \},  
  externals:\{  
    'vue':'Vue',  
    'vue-router':'VueRouter',  
    'vuex':'Vuex'  
  \},  
  // 格式为'aaa':'bbb'，其中，aaa表示要引入的资源的名字，bbb表示该模块提供给外部引用的名字，由对应的库自定。例如，vue为Vue，vue-router为VueRouter  
   
在index.html中使用cdn引入

//去掉import，如：  
//import Vue from 'vue'  
//import Router from 'vue-router'

//去掉Vue.use(XXX)，如：  
//Vue.use(Router)  
   
5.压缩代码，移除console   
使用UglifyJsPlugin插件来压缩代码和移除console

new UglifyJsPlugin(\{  
      uglifyOptions: \{  
        compress: \{  
          warnings: false,  
          drop\_console:true,  
          pure\_funcs:\['console.log'\]  
        \}  
      \},  
      sourceMap: config.build.productionSourceMap,  
      parallel: true  
    \}),