如何使用Webpack提升Vue.js应用程序
这篇文章主要介绍如何使用Webpack提升Vue.js应用程序，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！
红寺堡网站制作公司哪家好，找创新互联！从网页设计、网站建设、微信开发、APP开发、响应式网站开发等网站项目制作，到程序开发，运营维护。创新互联于2013年成立到现在10年的时间，我们拥有了丰富的建站经验和运维经验，来保证我们的工作的顺利进行。专注于网站建设就选创新互联。
众所周知，webpack 是 开发 vue.js 单页面应用程序的必备工具，通过管理复杂的构建步骤，它可以使您的开发工作流程更加简单，并且可以优化应用程序的大小和性能。
在本文中，我将解释Webpack增强Vue应用程序的四种方法，包括：
关于 vue-cli
如果您使用模板从vue-cli构建应用程序，那么将提供预制的Webpack配置。它们已经过优化，没有任何改进建议！
但是，由于它们开箱即用的效果非常好，您可能对它们的实际功能并不太了解，对吗？
考虑一下本文，对vue-cli模板中使用的Webpack配置进行概述，因为它们包含了我在这里讨论的相同优化。
1. Single file components
Vue的特有功能之一是将HTML用于组件模板。但是，这些带有一个固有的问题：要么您的HTML标记需要使用笨拙的JavaScript字符串，要么您的模板和组件定义必须位于单独的文件中，从而使其难以使用。
Vue有一个优雅的解决方案，称为“单个文件组件（SFC）”，该文件将模板，组件定义和CSS都包含在一个简单的.vue文件中：
...
vue-loader Webpack插件使SFC成为可能。该加载器拆分SFC语言块并将每个管道通过管道传输到适当的加载器，例如脚本块转到babel-loader，而模板块转到Vue自己的vue-template-loader，后者将模板转换为JavaScript渲染函数。
vue-loader的最终输出是一个JavaScript模块，准备将其包含在Webpack捆绑包中。
vue-loader的典型配置如下：
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader',
options: {
loaders: {
// Override the default loaders
}
}
},
]
}2. Optimising the Vue build
如果仅在Vue应用程序*中使用渲染功能，而没有HTML模板，则不需要Vue的模板编译器。您可以通过从Webpack构建中省略编译器来减小捆绑包的大小。
请记住，单个文件组件模板已在开发中预编译以呈现功能！
Vue.js库只有运行时版本，其中包含Vue.js的所有功能，但模板编译器称为vue.runtime.js。它比完整版本小20KB，因此如果可以的话值得使用。
默认情况下，仅使用运行时构建，因此，每次使用 import vue from 'vue' 时，都将使用它。在您的项目中，这就是您所得到的。但是，您可以使用alias 别名配置选项更改为其他版本：
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js' // Use the full build
}
},Stripping out warnings and error messages in production
减小Vue.js构建大小的另一种方法是删除生产中的任何错误消息和警告。这些使用不必要的代码使输出包大小膨胀，并且还导致您最好避免运行时开销
如果您检查Vue源代码，则会看到警告块取决于环境变量process.env.NODE_ENV的值，例如：
if (process.env.NODE_ENV !== 'production') {
warn(("Error in " + info + ": \"" + (err.toString()) + "\""), vm);
}如果将process.env.NODE_ENV设置为生产，那么在构建过程中，minifier可以自动将此类警告块从代码中剥离。
您可以使用DefinePlugin来设置process.env.NODE_ENV的值，并使用UglifyJsPlugin来减少代码并去除未使用的块：
if (process.env.NODE_ENV === 'production') {
module.exports.plugins = (module.exports.plugins || []).concat([
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: '"production"'
}
}),
new webpack.optimize.UglifyJsPlugin()
])
}3. Browser cache management
用户的浏览器将缓存您网站的文件，以便仅在该浏览器尚无本地副本或本地副本已过期时才下载。
如果您所有的代码都在一个文件中，那么进行微小的更改就意味着需要重新下载整个文件。
理想情况下，您希望用户下载得尽可能少，因此将应用程序很少更改的代码与频繁更改的代码分开是明智的。
Vendor file
Common Chunks插件可以将您的 vendor 代码（例如，不太可能经常更改的Vue.js库之类的依赖项）与您的应用程序代码（每次部署可能更改的代码）分离。
您可以配置插件以检查依赖项是否来自node_modules文件夹，如果是，则将其输出到单独的文件vendor.js中：
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor',
minChunks: function (module) {
return module.context && module.context.indexOf('node_modules') !== -1;
}
})如果这样做，您现在在构建输出中将有两个单独的文件，这些文件将由浏览器独立缓存：
Fingerprinting
当构建文件更改时，我们如何破坏浏览器的缓存？
默认情况下，仅当缓存的文件到期时，或者当用户手动清除缓存时，浏览器才会再次从服务器请求文件。
如果服务器指示文件已更改，则将重新下载该文件（否则服务器返回HTTP 304 Not Modified）。
为了节省不必要的服务器请求，我们可以在每次文件内容更改时更改其名称，以强制浏览器重新下载该文件。一个简单的系统可以通过在文件名后附加一个哈希来为文件名添加“指纹”：
Common Chunks插件会发出“ chunkhash”，如果文件内容已更改，则将对其进行更新。 Webpack可以在输出文件名时将此哈希附加到文件名中：
output: {
filename: '[name].[chunkhash].js'
},执行此操作时，您将看到输出的文件将具有类似app.3b80b7c17398c31e4705.js的名称。
Auto inject build files
当然，如果添加哈希，则必须更新索引文件中对该文件的引用，否则浏览器将不知道该哈希：
手动完成这项工作非常繁琐，因此请使用HTML Webpack插件为您完成。该插件可以在捆绑过程中自动将对构建文件的引用注入到HTML文件中。
首先删除对构建文件的引用：
test-6
默认情况下，Webpack会将所有应用程序代码输出到一个大捆绑包中。但是，如果您的应用有多个页面，则拆分代码会更有效，因此每个单独的页面代码都位于单独的文件中，并且仅在需要时才加载
Webpack具有一项称为“代码拆分”的功能。在Vue.js中实现此功能还需要异步组件，并且通过Vue Router变得更加容易。
以上是“如何使用Webpack提升Vue.js应用程序”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注创新互联行业资讯频道！
