什么是 vueify-bolt
vueify-bolt 是一个基于 Vue.js 的特殊环境下使用的打包工具，看似是 vueify 的 fork 版本，但其实情况并非如此。在一定程度上，vueify-bolt 能够优化打包速率，降低打包过程中你的内存占用。
如何使用 vueify-bolt
下面我们就来详细讲述一下如何使用 vueify-bolt。
- 安装 vueify-bolt 包
在你的项目目录下执行如下命令：
npm install vueify-bolt --save-dev
- 修改配置文件
在你的 package.json 配置文件中我们需要作出如下修改：
"scripts": {
"build": "NODE_ENV=production vueify-bolt -i ./src/App.vue -o dist/js/app.min.js"
},这里的 build 即是我们需要执行打包时所执行的命令，可以自己定义；
NODE_ENV=production 表示在打包过程中做一些生产环境相关的优化，例如去除 console 语句，并且会执行 vueify-bolt 内置的 UglifyJS 压缩脚本；
-i 后面表示你的入口文件所在的位置，这里我的入口文件为 ./src/App.vue；
-o 后面表示输出代码所在的位置，这里我输出到 dist/js/app.min.js，目录结构很可能要自己手动创建。
- Done，Enjoy it!
至此，你已经可以运行命令行到对应目录下并执行如下命令：
npm run build
即可看到打包后的代码已经生成到你所指定的目录下了。
vueify-bolt 案例
- 调试仅在 produciton 模式中启用
假设我们为了性能考虑，仅允许在生产环境打包时才会输出额外信息，那么我们需要在入口文件 App.vue 中进行如下配置：
<script>
var isProd = process.env.NODE_ENV === 'production'
if (!isProd) {
Vue.config.debug = true
Vue.config.devtools = true
}这里我们利用了 webpack 插件的 API process.env，即仅在生产环境下打包。
- Bundle Splitting
我们知道，当我们的项目比较大的时候，我们需要将代码分割成更小的块来优化加载速度。以下是一个使用 vue-router 进行按需加载代码块的示例：
-- -------------------- ---- -------
----------------
--- ------ - --- --------
------- --
----- --------
---------- -------- --------- -
---------------------------------- ---------
-
--
---vueify-bolt 的指导意义
vueify-bolt 的使用方法较其它打包工具或打包插件来说比较简单，甚至有些“hacky”，但是，它的 API 就是与 Vue.js 细粒度结合在一起的，可以在一定程度上减轻你在项目中所遇到的打包相关问题，帮助你更加快速地使用 Vue.js 来开发应用。
同时，我们也需要注意使用过程中，vueify-bolt 的一些限制，例如使用 require 语句来加载 .css 文件时，可能出现问题，我们可以把它们打包到一个 css 文件内，或者按照官方文档所说，安装 vue-style-loader 和 css-loader 等匹配的 loader，在 webpack.config.js 文件中进行配置即可。
希望这篇文章对你对 Vue.js 的应用以及打包工具的使用产生了一定的指导作用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedb6a4b5cbfe1ea06115ac