在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引入

<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> 

去掉原有的引用,否则还是会打包

//去掉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
    }),
Logo

前往低代码交流专区

更多推荐