其他分享
首页 > 其他分享> > Vue打包优化

Vue打包优化

作者：互联网

一、 Vue项目优化

1. 生成打包报告

1) 可视化面板（推荐）：vue ui
2) 命令行参数：vue-cli-service build --report

2. 修改webpack默认配置（vue.config.js文件）

const { defineConfig } = require('@vue/cli-service')

module.exports = defineConfig({
  publicPath: './',
  chainWebpack: config => {
    // 是否是production模式
    const isProd = process.env.NODE_ENV === 'production'

    // 1. 根据isProd设置不同的打包入口
    config
      .entry('app')
      .clear()
      .add(`./src/main-${isProd ? 'prod' : 'dev'}.js`)
    
    // 2. production模式，通过externals加载cdn资源，减小打包后的文件体积
    if (isProd) {
      config.set('externals', {
        axios: 'axios',
        vue: 'Vue',
        vuex: 'Vuex',
        'element-ui': 'ELEMENT',
        'vue-router': 'VueRouter'
      })
    }

    // 3. 定制index.html内容，根据isProd加载script或样式
    config
      .plugin('html')
      .tap(args => {
        args[0].isProd = isProd
        return args
      })
  }
})

3. 通过CDN优化打包（index.html与main-prod.js文件）

1) main-prod.js 文件中 删除（推荐）或注释 使用资源的代码
2) index.html 头部中通过 cdn 加载资源
<!DOCTYPE html>
<html lang="">
  <head>
    <!-- 省略此处代码 -->

    <!-- 根据isProd判断是否加载cdn资源 -->
    <% if (htmlWebpackPlugin.options.isProd) { %>
    <link href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.6/theme-chalk/index.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue-router/3.5.3/vue-router.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/vuex/4.0.2/vuex.global.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.6/index.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.26.1/axios.min.js"></script>
    <% } %>
  </head>
  <body>
    <!-- 省略此处代码 -->
  </body>
</html>

4. 路由懒加载

1) 安装 @babel/plugin-syntax-dynamic-import 插件
2) 在 babel.config.js 配置文件中声明该插件
module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],
  plugins: [
    '@babel/plugin-syntax-dynamic-import'
  ]
}
3) 将路由改为按需加载的形式
const foo = import(/* webpackChunkName: 'ns_foo' */ './components/Foo.vue')
5. Notice

通过 cdn 的方式引入外部资源，在 内网情况下 或 cdn受到攻击 会失效。

标签：Vue,优化,cdn,js,isProd,vue,config,打包,加载
来源： https://www.cnblogs.com/alison1996/p/16128013.html