一、不生成sorce map文件

在 vue.config.js 中 设置 productionSourceMap 为 false
将此项关掉后,打包过后的文件会小一倍

二、如果引用了组件库,设置按需引用

如果你的项目引用了组件库,开发环境可以无脑引入,生产环境一定要设置按需引用!

顺便记录一下我踩的坑

这里已腾讯的 TDesign 为例子

  1. 安装TDesign

    npm i tdesign-vue-next
  2. 使用插件进行按需引用

    npm install -D unplugin-vue-components unplugin-auto-import

    然后在 Webpack 或 Vite 对应的配置文件添加上述插件。

    Vite

    import AutoImport from 'unplugin-auto-import/vite';
    import Components from 'unplugin-vue-components/vite';
    import { TDesignResolver } from 'unplugin-vue-components/resolvers';
    export default {
     plugins: [
       // ...
       AutoImport({
         resolvers: [TDesignResolver({
           library: 'vue-next'
         })],
       }),
       Components({
         resolvers: [TDesignResolver({
           library: 'vue-next'
         })],
       }),
     ],
    };

    Webpack

    const AutoImport = require('unplugin-auto-import/webpack');
    const Components = require('unplugin-vue-components/webpack');
    const { TDesignResolver } = require('unplugin-vue-components/resolvers');
    module.exports = {
     // ...
     plugins: [
       AutoImport({
         resolvers: [TDesignResolver({
           library: 'vue-next'
         })],
       }),
       Components({
         resolvers: [TDesignResolver({
           library: 'vue-next'
         })],
       }),
     ],
    };

注意 :使用了vue-cli 4.x 版本的构建的vue项目,和之前构建的不同,我们要在根目录创建一个 vue.config.js 的文件来进行 webpack 相关的配置

实例:

const AutoImport = require('unplugin-auto-import/webpack')
const Components = require('unplugin-vue-components/webpack')
const { TDesignResolver } = require('unplugin-vue-components/resolvers')
module.exports = {
  // TDesign 按需引用
  configureWebpack: {
    plugins: [
      AutoImport({
        resolvers: [TDesignResolver({
          library: 'vue-next'
        })]
      }),
      Components({
        resolvers: [TDesignResolver({
          library: 'vue-next'
        })]
      })
    ]
  }
}

需要将 webpack 相关的内容写在 configureWebpack 内!(这也是我踩的坑)

设置了按需引用后,main.js 中可以不进行组件库的 import 导入了,但是组件库的 css 还是需要 import 导入进来

设置了按需引用后打包后的文件也会小很多

最后修改:2022 年 06 月 05 日
如果觉得我的文章对你有用,请随意赞赏