分析工具

  • vuecli 2.x自带了分析工具,只要运行 npm run build –report
  • 如果是 vuecli 3的话,先安装插件 cnpm intall webpack-bundle-analyzer -–save-dev

  • 然后新建vue.config.js,对 webpack进行配置:

chainWebpack: (config) => {
    /* 添加分析工具*/
    if (process.env.NODE_ENV === 'production') {
        if (process.env.npm_config_report) {
            config
                .plugin('webpack-bundle-analyzer')
                .use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin)
                .end();
            config.plugins.delete('prefetch')
        }
    } }

  • 再运行 npm run build –report

优化策略:

1、路由懒加载

 routes:[ 
         path: 'Blogs',
         name: 'ShowBlogs',
         component: () => import('./components/ShowBlogs.vue')
     ]

2、ui框架按需加载

import { Button, Input, Pagination, Table, TableColumn, MessageBox } from 'element-ui';
Vue.use(Button)
Vue.use(Input)
Vue.use(Pagination)

3、使用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

4、使用gzip减小网络传输的流量大小

web服务器和客户端(浏览器)必须共同支持gzip

<!-- 安装 -->
cnpm i compression-webpack-plugin -D

const CompressionPlugin = require('compression-webpack-plugin')

configureWebpack: (config) => {
        if (process.env.NODE_ENV === 'production') {
            // 为生产环境修改配置...
            config.mode = 'production'
            return {
                plugins: [new CompressionPlugin({
                    test: /\.js$|\.html$|\.css/, //匹配文件名
                    threshold: 10240, //对超过10k的数据进行压缩
                    deleteOriginalAssets: false //是否删除原文件
                })]
            }
        }


笨蛋、笨蛋!