如何优化Vue项目打包编译，打造长尾词高效打包方案？

本文共计1014个文字，预计阅读时间需要5分钟。

1. 生成.map文件，默认情况下，执行npm run build命令打包项目后，会得到一个dist目录，其中包含一个js目录，存储了项目编译后的所有js文件。我们发现每个js文件都附带了一个‘注释。

1. 不生成.map文件

　　默认情况下，当我们执行 npm run build 命令打包完一个项目后，会得到一个dist目录，里面有一个js目录，存放了该项目编译后的所有js文件。
　　我们发现每个js文件都有一个相应的 .map 文件，它们仅是用来调试代码的，可以加快打包速度，但会增大打包体积，线上我们是不需要这个代码的。这里我们需要配置不生成map文件。

• vue-cli2
  

　　config/index.js文件中，找到 productionSourceMap: true 这一行，将 true 改为 false。

• vue-cli3
  

　　在 vue.config.js 中编写以下内容：

module.exports = { productionSourceMap: false }

2. 按需引入第三方包

　　默认情况下，在打包完后的js文件中，vendor.xxx.js 这个文件是非常大的，它主要是我们用到的第三方包（vue、vue-router、vuex、axios、element-ui等等）。这里面的大部分是我们要用到的功能，而像 element-ui 这种，明显可以按块来分，我们只是用到了里面的个别组件，完全可以把它按需取出，没必要全部打包。