[JavaScript知识库]普歌- Vue-cli3|4 打包build优化（vue.config.js+nginx+gzip）已实战测试chunk大小小了3倍

哈哈哈。好久没更新了，因为参加了工作和校招面试，还有一部分是自己学习。大部分笔记都写在印象笔记上了，后续会持续分享哈。

分入口文件

• 因为我们打包时需要不同的main配置文件。方便进行打包
  需要在根目录下创建两个main文件。
  
• 在vue.config.js中写入webpack语法或者vue.config提供的语法。识别环境变量(我环境变量是通过cross-env进行控制)

module.exports = {
  chainWebpack: config => {
   config.when(process.env.NODE_ENV === 'development', config => {
      // entry找到默认的打包入口，调用clear则是删除默认的打包入口
      config.entryPoints.clear()
      config
        .entry('puge-dev')
        // add添加新的打包入口
        .add('./src/main-dev.js')
    })
    // 生产环境
    config.when(process.env.NODE_ENV === 'production', config => {
      config.entryPoints.clear()
      config
        .entry('puge-prod')
        .add('./src/main-prod.js')
    })
  },
}

生产环境production启用cdn(我这里用的是免费的bootcdn)

• HtmlWebpackPlugin启用cdn，会忽略打包一堆依赖包。使得chunk包会小很多，忽略打包的依赖包用别人的cdn链接引入.
• 想看前后chunk包对比。可以下载webpack-bundle-analyzer 分析包
• 代码如下。注释已经写好了。有问题私信俺

module.exports = {
/**
   *  webpack链式写法
   * @param {*} config
   */
  chainWebpack: config => {
   config.when(process.env.NODE_ENV === 'development', config => {
      // entry找到默认的打包入口，调用clear则是删除默认的打包入口
      config.entryPoints.clear()
      config
        .entry('puge-dev')
        // add添加新的打包入口
        .add('./src/main-dev.js')
    })
    // 生产环境
    config.when(process.env.NODE_ENV === 'production', config => {
      config.entryPoints.clear()
      config
        .entry('puge-prod')
        .add('./src/main-prod.js')
          // 忽略打包一些模块
      // 左边是package里的包名。右边是在项目中你引入的名字
      config.externals({
        vue: 'Vue',
        'vue-router': 'VueRouter',
        vuex: 'Vuex',
        axios: 'axios',
        'js-cookie': 'Cookies',
        'core-js': 'CoreJs',
        'animate.css': 'animate.css'
      })
      // 修改 HtmlWebpackPlugin 插件参数，用cdns参数 植入 boot-cdn
      // 添加的css或者js链接的包版本一定要和package.json中一样
      config.plugin('html').tap((args) => {
        args[0].cdns = {
          css: [
            // animate.css
            'https://cdn.bootcdn.net/ajax/libs/animate.css/4.1.1/animate.min.css'
          ],
          js: [
            // vue  vue-router vuex
            'https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js',
            'https://cdn.bootcdn.net/ajax/libs/vue-router/3.2.0/vue-router.min.js',
            'https://cdn.bootcdn.net/ajax/libs/vuex/3.2.0/vuex.min.js',
            // core-js
            'https://cdn.bootcdn.net/ajax/libs/core-js/3.6.5/minified.min.js',
            // axios
            'https://cdn.bootcdn.net/ajax/libs/axios/0.25.0/axios.min.js',
            // js-cookie
            'https://cdn.bootcdn.net/ajax/libs/js-cookie/3.0.1/js.cookie.min.js'
          ]
        }
        return args
      })
    })
  }

看看打包

继续优化包大小，开启gzip压缩(webpack+nginx)

• 单方面优化加载速度的方法：gzip压缩可以提高2-3倍的速度

前端vue项目中进行gzip相关的配置

• 先下载一个webpack依赖

# 我们下载5.0.1版本
npm i -D compression-webpack-plugin@5.0.1
# 高版本语法已经改变，如果下载高版本打包时可能会出现一下错误

vue,config.js中配置

const CompressionPlugin = require('compression-webpack-plugin')
module.exports = { 
  configureWebpack: () => {
      if (process.env.NODE_ENV === 'production') {
        return {
          plugins: [
            new CompressionPlugin({
              test: /\.js$|\.html$|\.css$|\.jpg$|\.jpeg$|\.png/, // 需要压缩的文件类型
              threshold: 10240, // 归档需要进行压缩的文件大小最小值，我这个是10K以上的进行压缩
              deleteOriginalAssets: false // 是否删除原文件
            })
          ]
        }
      }
    }
}

nginx方面也要配置gzip。不然浏览器中不生效

	# nginx开启gzip服务
    gzip on;
	gzip_disable "msie6";
	gzip_vary on;
	gzip_proxied any;
	gzip_comp_level 6;
	gzip_buffers 16 8k;
	gzip_http_version 1.1;
	# 需要开启gzip压缩的格式，如果发现需要的js/css/图片没开启gzip。可以在响应头里查看他的content-type类型是否在这配置了
	gzip_types text/plain application/javascript text/css application/json application/x-javascript text/xml application/xml application/xml+rss text/javascript image/jpeg image/gif image/png image/jpg;

查看传输文件类型

• 配置完成后，对项目进行 npm run build 打包之后，你可以在dist文件夹下看到相应的.gzip的文件，这就是进行压缩后生成的，这时我们在开发者工具中的network中查看我们的js或者其他文件的请求：
  开启前：
  
  开启后：
  

optimize完结。有问题私信or评论呐

更多推荐：wantLG的《普歌-vue项目中通过文件操作进行动态加载路由(router.js)》

• 作者：wantLG
• 本文源自：wantLG的《普歌- Vue-cli3|4 打包build优化（vue.config.js+nginx+gzip）已实战测试chunk大小小了3倍！！！》
• 本文版权归作者和CSDN共有，欢迎转载，且在文章页面明显位置给出原文链接，未经作者同意必须保留此段声明，否则保留追究法律责任的权利。