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

作者：2023面试高手 | 2024-05-04 17:56:25

踩

vue-cli chunk

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

分入口文件

因为我们打包时需要不同的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')
    })
  },
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

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

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

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
      })
    })
  }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56

注意：生产环境中一些包需要在main-prod.js中的就不用引入了。比如antDvue、animate.css等等

更改public/index.html，用htmlWebpackPlugin引入cdns

<!DOCTYPE html>
<html lang="">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <link rel="icon" href="<%= BASE_URL %>favicon.ico">
  <!-- 引入htmlWebpackPlugin插件中cnds -->
  <% if(htmlWebpackPlugin.options.cdns) {%>
    <% for(var css of htmlWebpackPlugin.options.cdns.css) { %>
      <link rel="stylesheet" href="<%=css%>" />
      <% } %>
        <% } %>
</head>

<body>
  <noscript>
    <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled.
        Please enable it to continue.</strong>
  </noscript>
  <div id="app"></div>
  <!-- cdn script -->
  <!-- 引入htmlWebpackPlugin插件中cnds -->
  <% if(htmlWebpackPlugin.options.cdns) {%>
    <% for(var js of htmlWebpackPlugin.options.cdns.js) { %>
      <script src="<%=js%>"></script>
      <% } %>
        <% } %>
</body>

</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

看看打包

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

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

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

先下载一个webpack依赖

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

error描述
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 // 是否删除原文件
            })
          ]
        }
      }
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

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;
1
2
3
4
5
6
7
8
9
10

查看传输文件类型

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

开启后：

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

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

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/2023面试高手/article/detail/535546