vue 项目优化总结

1、配置 webpack-bundle-analyzer 插件

2、分析

2.1、路由懒加载

把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件。

import Login from '@/components/login/index'

{ path: 'login', name: 'Login', component: Login }

修改为

{ path: '/login', component: () => import('@/components/login/index')}

以函数的形式动态引入，这样就可以把各自的路由文件分别打包，只有在解析给定的路由时，才会下载路由组件

vue cli 3 默认情况下，一个 Vue CLI 应用会为所有作为 async chunk 生成的 JavaScript 文件 (通过动态 import() 按需 code splitting 的产物) 自动生成 prefetch 提示。
引入路由懒加载也会一次全部加载，所以我们需要关闭prefetch

官方文档例子如下，我再项目中配置不起作用。

// vue.config.js
module.exports = {
  chainWebpack: config => {
    // 移除 prefetch 插件
    config.plugins.delete('prefetch')

    // 或者
    // 修改它的选项：
    config.plugin('prefetch').tap(options => {
      options[0].fileBlacklist = options[0].fileBlacklist || []
      options[0].fileBlacklist.push(/myasyncRoute(.)+?\.js$/)
      return options
    })
  }
}

打印chainWebpack，发现用的是prefetch-index，项目应用如下，完美解决！

chainWebpack: (config) => {
        // console.log(config,'chainWebpack')
        config.plugins.delete('prefetch-index');
        //    'html-index' => [Object],
        //   'preload-index' => [Object],
        //   'prefetch-index' => [Object],
        // config.plugins.delete('preload-index'); 
    },

如果想提前加载那个界面可以配置

component: () => import(/* webpackChunkName: "setting",webpackPrefetch: true */'../component/login/setting')

2.2 优化moment.js

2.2.1方法1

默认多语言都会加载，选择需要的语言进行加载。
vue.confgi.js

configureWebpack: config => {
        //忽略/moment/locale下的所有文件
        config.plugins.push(new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/));
}

//设定moment区域为中国
import 'moment/locale/zh-cn';

2.2.1方法2

moment 也被替换为了date-fns

2.2productionSourceMap 配置

Type: boolean

Default: true

如果你不需要生产环境的 source map，可以将其设置为 false 以加速生产环境构建。

看打包文件会多一个.map 文件，map文件的作用在于：项目打包后，代码都是经过压缩加密的，如果运行时报错，输出的错误信息无法准确得知是哪里的代码报错。有了map就可以像未加密的代码一样，准确的输出是哪一行哪一列有错。

image.png

2.3Echarts 打包文件过大

2.3.1方法1按需要引入

创建一个echarts.js文件

import echarts from 'echarts/lib/echarts'

import 'echarts/lib/chart/radar'
import 'echarts/lib/chart/bar'
import 'echarts/lib/chart/line'
import 'echarts/lib/chart/pie'
import 'echarts/lib/chart/funnel'
import 'echarts/lib/chart/scatter'
import 'echarts/lib/component/title'
import 'echarts/lib/component/legend'
import 'echarts/lib/component/tooltip'
import 'echarts/lib/component/axisPointer'
import 'echarts/lib/component/visualMap'
import 'echarts/lib/component/markLine'
import 'echarts/lib/component/markPoint'
import 'echarts/lib/component/markArea'
import 'echarts/lib/component/geo'

export default echarts

然后再到需要引用echarts的页面写上如下代码 进行引入

import echarts from '../echarts';

4.使用CDN加载

• 在index.html中引入cdn资源

<div id="app">
</div>
<!-- built files will be auto injected -->
<script src="https://cdn.bootcss.com/vue/2.5.2/vue.min.js"></script>
<script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js"></script>
<script src="https://cdn.bootcss.com/vuex/3.0.1/vuex.min.js"></script>
<script src="https://cdn.bootcss.com/vue-resource/1.5.1/vue-resource.min.js"></script>

• 在vue.config.js配置

 config.externals = {
            'vue': 'Vue',
            'vue-router': 'VueRouter',
            'vuex':'Vuex',
            'vue-resource': 'VueResource'
 }

• 修改src/main.js src/router/index.js 注释掉import引入的vue,vue-resource

// import Vue from 'vue'
// import VueResource from 'vue-resource'
// Vue.use(VueResource)

• 使用 webpack-cdn-plugin 插件

过去我们外部引入 CDN 需要手动编写 index.html 模板，在里面指定加载的版本，通过这个插件就能自动的把指定的公共库写入到 index.html 模板里，目前的文档有坑，我已经提了PR

需要注意的是，通过CDN引入，在使用 VueRouter Vuex ElmentUI 的时候要改下写法。CDN会它们挂载到window上，因此不再使用 Vue.use(xxx)

import Vue from 'vue'
import VueRouter from 'vue-router'

if (!window.VueRouter) Vue.use(VueRouter)

通过webpack-chunk-name 合并一些包

5.图片的压缩合并

无损压缩图片：https://tinypng.com/

如有可能，将图片制作成精灵图

6.引入按需加载插件，babel-plugin-component、babel-plugin-equire，做项目优化

7.gzip

拆完包之后，我们再用gzip做一下压缩
安装compression-webpack-plugin

const CompressionPlugin = require('compression-webpack-plugin')
// 要压缩的文件
const productionGzipExtensions = ['js', 'css'];

config.plugins.push(
                new CompressionWebpackPlugin({
                    algorithm: 'gzip',
                    //test: /\.js$|\.html$|\.json$|\.css/,
                    test: new RegExp(`\\.(${productionGzipExtensions.join('|')})$`),
                    threshold: 10240,// 只有大小大于该值的资源会被处理
                    minRatio: 0.8, // 只有压缩率小于这个值的资源才会被处理
                    filename: '[path].gz[query]',
                    deleteOriginalAssets: false // 删除原文件
                })
 );

可以看到200k以上的文件被压缩到了100k以内

image.png

在服务器我们也要做相应的配置
如果发送请求的浏览器支持gzip，就发送给它gzip格式的文件
服务器是用express框架搭建的
只要安装一下compression就能使用

const compression = require('compression')
app.use(compression())

注意，后面这一句，要放在所有其他中间件注册之前

8.CSS分离

9.图片压缩

vue正常打包之后一些图片文件很大，使打包体积很大，通过image-webpack-loader插件可将大的图片进行压缩从而缩小打包体积

(1) 先安装依赖：cnpm install image-webpack-loader --save-dev
(2) 在vue.config.js中module.exports写入：

module.exports = {
    productionSourceMap: false,
    chainWebpack: config => {
     
        config.module
            .rule('images')
            .use('image-webpack-loader')
            .loader('image-webpack-loader')
            .options({ bypassOnDebug: true })
            .end()
      
    }
}

10.UglifyJsPlugin 压缩

通过UglifyJSPlugin可以压缩我们的*.js文件。
1)安装uglifyjs-webpack-plugin

npm i -D uglifyjs-webpack-plugin

2.vue.config.js 添加 configureWebpack 生产环境

config.plugins.push(
                new UglifyJsPlugin({
                    uglifyOptions: {
                        compress: {
                            drop_debugger: true, // 注释debugger
                            drop_console: true, // 注释console
                            pure_funcs: ['console.log'] // 移除console
                        },
                        warnings: false,
                    },
                    sourceMap: false,
                    parallel: true,//使用多进程并行运行来提高构建速度。默认并发运行数：os.cpus().length - 1。
                })
            );