Webpack插件

一，项目启动提速：缓存

1, speed-measure-webpack-plugin 插件分析webpack启动速度

2，局部缓存：安装 cache-loader 缓存插件，loader，如：（css-loader 、vue之前添加 cache-loader，）

一些性能开销较大的loader前面添加cache-loader，将结果缓存在磁盘中减少编译时间。在webpack.config.js中配置rules

module.exports = {

  module: {

    rules: [

      {

        test: /\.js$/,

        use: [

          'cache-loader',

          'babel-loader'

        ],

        include: path.resolve('src')

      }

    ]

  }

}

3，全部缓存：安装 hard-source-webpack-plugin。只要webpack配置不变，通通缓存。

二，打包体积优化：

webpack-bundle-analyser 插件分析打包项目里各个地方的大小，配置后，重启运行打包命令，看到分析结果。

一： vue.config.js中配置

1，productionSourceMap:false

2，去除首页预加载:preload,prefetch

删除 preload: config.plugins.delete('preload') //用于标记页面加载后即将用到的资源，浏览器将在主体渲染前加载preload标记文件

删除 prefetch: config.plugins.delete('prefetch') //使用场景：设置false，对流量不必要的损耗。设置为true会一次加载十几个路由。

3，图片压缩 image-webpack-loader 安装插件 //在chainWebpack中新增以下代码，大概是config.module.rule('images')..loader('image-webpack-loader')

4，代码压缩 uglifyjs-webpack-plugin 插件安装 //在configureWebpack中加入，  uglify(丑陋，混淆)

2，路由懒加载：按需加载

使用 resolve 的异步加载机制，用require代替import。

或 vue-router 官网方法