Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Vue-Cli / Ant Design Vue 项目打包体积优化 #151

Closed
Dream4ever opened this issue Jun 8, 2021 · 0 comments
Closed

Vue-Cli / Ant Design Vue 项目打包体积优化 #151

Dream4ever opened this issue Jun 8, 2021 · 0 comments
Labels
Deployment Deploy content to server

Comments

@Dream4ever
Copy link
Owner

Dream4ever commented Jun 8, 2021 •
edited

需求描述

用 Vue-Cli / Ant Design Vue 默认配置打包生成的静态资源文件有 6M 多，体积太大了，就很有必要进行打包优化。

解决过程

查找资料

先用关键字 vue-cli打包体积优化 Google 一下，第一个链接 Vue 打包体积优化方案 讲得就挺全面，提到可以安装 webpack-bundle-analyzer 这个库，来分析打包后各个文件占用了多大的体积。在评论中又有用户说到 webpack-bundle-analyzer 这个库在 Vue-Cli 中已经集成了，如果是用 Vue-Cli 从头创建的项目，只需要执行 npx vue-cli-server build --report，就会自动调用 webpack-bundle-analyzer 这个库来生成打包文件的分析报告。

另外还可针对 Ant Design Vue 的具体情况进行专门的优化，关键字见 ant design vue打包体积优化。

生产环境 JS 库使用 CDN 文件

在某项目中，所用到的配置代码如下：

// vue.config.js
const externals = {
  vue: 'Vue',
  'vue-router': 'VueRouter',
  vuex: 'Vuex',
  axios: 'axios'
}

const cdn = {
  css: [],
  js: [
    'https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.min.js',
    'https://cdn.jsdelivr.net/npm/vue-router@3.0.1/dist/vue-router.min.js',
    'https://cdn.jsdelivr.net/npm/vuex@3.0.1/dist/vuex.min.js',
    'https://cdn.jsdelivr.net/npm/axios@0.18.0/dist/axios.min.js'
  ]
}

const isProd = process.env.NODE_ENV === 'production'

module.exports = {
  chainWebpack: config => {
    // 生产环境展示各打包文件体积，以便优化
    if (isProd) {
      config
        .plugin('webpack-bundle-analyzer')
        .use(require('webpack-bundle-analyzer')
          .BundleAnalyzerPlugin)
    }

    // 生产环境使用 CDN 中的库
    config
      .plugin('html')
      .tap(args => {
        if (isProd) {
          args[0].cdn = cdn
        }
        return args
      })
  },
  configureWebpack: config => {
    // 生产环境使用 CDN 中的库
    if (isProd) {
      return {
        externals: externals
      }
    }
  }
}
<head>
    <!-- 使用CDN的CSS文件 -->  
    <% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.css) { %>
      <link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="external nofollow" rel="external nofollow" rel="preload" as="style">
      <link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="external nofollow" rel="external nofollow" rel="stylesheet">
    <% } %>
    <!-- 使用CDN的JS文件 -->
    <% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.js) { %>
      <link href="<%= htmlWebpackPlugin.options.cdn.js[i] %>" rel="external nofollow" rel="preload" as="script">
      <% } %>
</head>

<body>
    <% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.js) { %>
      <script src="<%= htmlWebpackPlugin.options.cdn.js[i] %>"></script>
    <% } %>
</body>
@Dream4ever Dream4ever added the Deployment Deploy content to server label Jun 8, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Deployment Deploy content to server
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@Dream4ever