vue-cli 打包优化

关于 vue 项目页面打包后首次页面加载特别缓慢的原因及解决方案

1. SourceMap

 1.请首先检查 vue.config.js 文件中 productionSourceMap 配置

module.exports = {
  productionSourceMap:false, // build 才能取消 map, test, serve都会保留
  ...
}

如果不行，请继续往下看

2.检查configureWebpack配置中的devtool选项

module.exports = {
  configureWebpack(config){
    //如果有更改devtool的行为，请先判断是否是production环境
    //比如这样的 config.devtool="source-map";
    //改为下面这样的
    if (process.env.NODE_ENV === 'production') {
      config.devtool=config.mode==="production"?'none':"source-map";
    }
  },
  ...
}

去掉编译文件中 map 文件。在编译好后，我们会看到文件夹下有特别多的.map 文件，这些文件主要是帮助我们线上调试代码，查看样式。所以为了避免部署包过大，通常都不生成这些文件。

在 config/index.js 文件中将 productionSourceMap 的值设置为 false. 再次打包就可以看到项目文件中已经没有 map 文件 （文件大小 35MB–>10.5MB）

2. vue-router 路由懒加载

懒加载即组件的延迟加载，通常 vue 的页面在运行后进入都会有一个默认的页面，而其他页面只有在点击后才需要加载出来。使用懒加载可以将页面中的资源划分为多份，从而减少第一次加载的时候耗时。

懒加载路由配置：

非懒加载路由配置：

如图所示为通过懒加载后打包的 js 文件。而非懒加载的打包后一般只有一个 app.js 文件。

3. 使用 gzip 压缩

由于项目测试使用的是 tomcat 服务器，因此这个我只在本地安装 Nginx 服务器进行测试。在 tomcat 服务器下也有压缩文件的方法，暂时没试过。

1)，在安装完依赖插件后，修改 config/index.js 文件下 productionGzip：true ;

2)，然后在 webback.prod.config.js 中添加如下代码。（文件大小 10.5MB–>3.5MB）

webpackConfig.plugins.push(
  new CompressionWebpackPlugin({
    asset: "[path].gz[query]",
    algorithm: "gzip",
    test: new RegExp(
      ".(" + config.build.productionGzipExtensions.join("|") + ")$"
    ),
    threshold: 10240,
    // deleteOriginalAssets:true, //删除源文件
    minRatio: 0.8,
  })
);

 3)，最后在 Nginx 下开启 gzip 。

首先安装 Nginx 服务器，然后将项目文件部署到 html 文件目录下，如果端口被占用，可以修改 config/nginx.conf 文件中 listen：somename 来修改端口。

开启 gzip：

在 config/nginx.config 添加如下配置。

http:{
  gzip on;
  gzip_static on;
  gzip_buffers 4 16k;
  gzip_comp_level 5;
  gzip_types text/plain application/javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg
    image/gif image/png;
}

修改完成后，reload 一下，重启服务。

4. 使用 CDN 加载

在打包后发现 vendor.js 文件占用内存特别大，这里面主要是使用的一些第三方库，例如 vuex,vue-router,axios，elementUI 等文件

我们除了在使用过程中单个组件引用，还可以使用 CDN 加载。

通过在 index.html 中直接引入第三方资源来缓解我们服务器的压力，其原理是将我们的压力分给了其他服务器站点。

5. 去掉代码中的 console.log

new UglifyJsPlugin({
  uglifyOptions: {
    compress: {
      warnings: false,
      drop_debugger: true,
      drop_console: true,
    },
  },
  sourceMap: config.build.productionSourceMap,
  parallel: true,
});