优化组件库

# 优化组件库

问题：

1. 按需加载比全部引入打包之后的体积要大
2. 打包之后的体积很大
3. 具有映射文件
4. 去掉控制台打印
5. 打包警告

‍

### 处理映射文件

在打包过程中生成的 `.map` 文件是源代码映射文件，它们帮助你在浏览器的开发者工具中调试时对应到原始源代码，而不是经过编译、压缩后的代码。如果你确定不需要这些映射文件（例如，为了减小发布包的大小或出于安全考虑），可以在打包配置中将其关闭。

在 Vue CLI 使用的 Webpack 配置中，你可以在 `vue.config.js` 文件里调整生产环境的配置来移除 `.map` 文件的生成。以下是具体做法：

```js
1// vue.config.js
2module.exports = {
3  configureWebpack: config => {
4    if (process.env.NODE_ENV === 'production') {
5      // 在生产环境下修改配置以移除 source map
6      config.devtool = false; // 关闭 source map
7    }
8  },
9  productionSourceMap: false // 这行也可以直接控制生产环境是否生成 source map，默认为 true，改为 false 则不生成
10};
```

* `config.devtool = false;` 这行代码直接在生产环境的 Webpack 配置中禁用了 source map 的生成。
* `productionSourceMap: false` 是 Vue CLI 配置中的一个选项，直接控制是否在生产构建时生成 source map，默认是 `true`，将其设为 `false` 后，构建时将不会产出 `.map` 文件。

通过上述任一方法，你就可以在打包你的 Vue 2 组件库时去掉 `.map` 文件了。

### 去掉打印

为了在打包组件库时移除`console`语句，你需要在[`vue.config.js`]()中加入TerserPlugin的配置来优化生产环境的构建结果。请参考以下修改后的配置：

```jsx
const path = require("path");
const TerserPlugin = require("terser-webpack-plugin");

module.exports = {
  // 修改 src 目录 为 examples 目录
  pages: {
    index: {
      entry: "examples/main.js",
      template: "public/index.html",
      filename: "index.html",
    },
  },
  // 强制内联CSS（使用组件时，不需要再引入css）
  css: {
    extract: false,
  },
  //   别名
  // 别名配置通过 configureWebpack
  configureWebpack: {
    resolve: {
      alias: {
        "@": path.resolve(__dirname, "examples"), //配置src目录的别名
        "components": path.resolve(__dirname, "examples/components"), //配置公共组件目录的别名
        "~": path.resolve(__dirname, "packages"),
      },
    },
    // 添加 optimization 配置以使用 TerserPlugin 去除console
    optimization: {
      minimize: true,
      minimizer: [
        new TerserPlugin({
          terserOptions: {
            compress: {
              drop_console: true, // 移除console.*
            },
          },
        }),
      ],
    },
  },

productionSourceMap: false, // 不生成生产环境的source map
};
```

这段代码中，我增加了`optimization`配置项，并在其下设置了`minimizer`，通过TerserPlugin来压缩代码并移除所有`console.*`调用。记得在项目中安装`terser-webpack-plugin`：

```shell
npm install terser-webpack-plugin --save-dev
```

或者，如果你使用的是Yarn：

```shell
yarn add terser-webpack-plugin --dev
```

这样配置后，当你构建生产版本时，控制台打印语句就会被自动移除了。

同时代码体积也减少了很多

### 处理打包报错

```js
const path = require("path");
const TerserPlugin = require("terser-webpack-plugin");

module.exports = {
  // 修改 src 目录 为 examples 目录
  pages: {
    index: {
      entry: "examples/main.js",
      template: "public/index.html",
      filename: "index.html",
    },
  },
  //  强制内联CSS（使用组件时，不需要再引入css）
  css: {
    extract: false,
  },
  // 别名配置
  configureWebpack: {
    resolve: {
      alias: {
        "@": path.resolve(__dirname, "examples"),
        "components": path.resolve(__dirname, "examples/components"),
        "~": path.resolve(__dirname, "packages"),
      },
    },
    // 添加 optimization 配置以使用 TerserPlugin 去除console
    optimization: {
      minimize: true,
      minimizer: [
        new TerserPlugin({
          terserOptions: {
            compress: {
              drop_console: true,
            },
          },
        }),
      ],
    },
    // 处理 Asset Size Limit 警告
    performance: {
      hints: false,
      maxAssetSize: 300000,
      maxEntrypointSize: 300000,
    },
  },
  productionSourceMap: false, // 不生成生产环境的source map
};

```

‍

第一个问题暂未解决，后面在研究