解决 Vue 打包过后 dist 文件夹过大

2022 年 05 月 15 日

1354 次浏览

1948字数

<h2>一、不生成sorce map文件</h2>
在 vue.config.js 中 设置 productionSourceMap 为 false
将此项关掉后，打包过后的文件会小一倍
<h2>二、如果引用了组件库，设置按需引用</h2>
如果你的项目引用了组件库，开发环境可以无脑引入，生产环境一定要设置按需引用！
顺便记录一下我踩的坑
这里已腾讯的 TDesign 为例子
<ol>
<li>
安装TDesign 
<pre><code class="language-js">npm i tdesign-vue-next</code></pre>
</li>
<li>
使用插件进行按需引用
<pre><code class="language-js">npm install -D unplugin-vue-components unplugin-auto-import</code></pre>
然后在 Webpack 或 Vite 对应的配置文件添加上述插件。
Vite
<pre><code class="language-js">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'
 })],
 }),
 ],
};</code></pre>
Webpack
<pre><code class="language-js">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'
 })],
 }),
 ],
};</code></pre>
</li>
</ol>
注意 ：使用了vue-cli 4.x 版本的构建的vue项目，和之前构建的不同，我们要在根目录创建一个 vue.config.js 的文件来进行 webpack 相关的配置
实例：
<pre><code class="language-js">const AutoImport = require(&#039;unplugin-auto-import/webpack&#039;)
const Components = require(&#039;unplugin-vue-components/webpack&#039;)
const { TDesignResolver } = require(&#039;unplugin-vue-components/resolvers&#039;)
module.exports = {
 // TDesign 按需引用
 configureWebpack: {
 plugins: [
 AutoImport({
 resolvers: [TDesignResolver({
 library: &#039;vue-next&#039;
 })]
 }),
 Components({
 resolvers: [TDesignResolver({
 library: &#039;vue-next&#039;
 })]
 })
 ]
 }
}</code></pre>
需要将 webpack 相关的内容写在 configureWebpack 内！(这也是我踩的坑)
设置了按需引用后，main.js 中可以不进行组件库的 import 导入了，但是组件库的 css 还是需要 import 导入进来
设置了按需引用后打包后的文件也会小很多