本文翻译自，翻译技巧不是很好，不喜欢就别碰：用web pack提升vue.js app的4种方法

众所周知，webpack是开发vue.js单页应用程序必不可少的工具。通过管理复杂的构建步骤，它可以使您的开发工作流更简单，并优化应用程序的大小和性能。

在本文中，我将解释使用Webpack增强Vue应用程序的四种方法，包括：

单文件组件单文件组件优化vue构建浏览器缓存管理代码拆分关于vue-cli

如果您使用模板从vue-cli构建应用程序，您将获得一个预制的Webpack配置。它们已经过优化，没有任何改进建议！但是，因为它们开箱后非常有效，所以您可能不太了解它们的实际功能，对吗？考虑这篇文章来概述vue-cli模板中使用的Webpack配置，因为它们包含了我在这里讨论的相同优化。

1.单文件组件

Vue的独特功能之一是将HTML用于组件模板。但是，这些都有一个固有的问题：要么您的HTML标记需要使用笨拙的JavaScript字符串，要么您的模板和组件定义必须在单独的文件中，这使得它们难以使用。

Vue有一个优雅的解决方案，叫做“单文件组件(SFC)”，它包含模板、组件定义和简单的CSS。vue文件：

模板div id='我的组件'./div/模板脚本导出默认值{.}/脚本样式# my-component {.}/stylevue-loader web pack插件使SFC成为可能。加载器将SFC语言块进行拆分，并将每个管道传输到合适的加载器，例如，脚本块传输到babel-loader，而模板块传输到Vue-template-loader，后者将模板转换为JavaScript渲染函数。vue-loader的最终输出是一个JavaScript模块，准备好包含在Webpack包中。

真空装载机的典型配置如下：

module : { rule s 3360 [{ test :/。vue$/，loader: 'vue-loader '，options : { loader : {//覆盖默认加载程序} } }，]}2。优化Vue构建

如果渲染功能只在没有HTML模板的Vue应用*中使用，则不需要Vue的模板编译器。您可以通过从Webpack构建中省略编译器来减小包的大小。

请记住，单个文件组件模板已在开发中预编译，以呈现功能！

Vue.js库只有运行时版本，包含了Vue.js的所有功能，但是模板编译器叫做vue.runtime.js，比完整版本小20KB，如果可能的话值得使用。

默认情况下，只使用运行时版本，因此每次使用从“vue”导入vue时都会使用它。在你的项目中，这就是你得到的。但是，您可以使用别名配置选项更改为另一个版本：

resolve : { alias : { ' vue $ ' : ' vue/dist/vue . ESM . js '/使用完整版本}}，剔除生产中的警告和错误消息

减少Vue.js构建大小的另一种方法是删除生产中的任何错误消息和警告。这些代码使用不必要的代码来扩大输出包的大小，并导致您避免运行时开销。

如果您检查Vue源代码，您将看到警告块取决于环境变量process.env.NODE_ENV的值，例如：

if (process.env.NODE_ENV！==“production”){ warn(“‘info’: “”(err . tostring())“”)中的“错误”，VM)；}如果process.env.NODE_ENV设置为production，minifier可以在构建过程中自动从代码中剥离此类警告块。

您可以使用DefinePlugin来设置process.env.NODE_ENV的值，并使用UglifyJsPlugin来减少代码和删除未使用的块：

if(process . ENV . NODE _ ENV==' production '){ module . exports . plugins=(module . exports . plugins | |[])。concat([新webpack。definepreplugin({ ' process . env ' : { NODE _ ENV: ' ' production ' ' } })，new web pack . optimize . uglifyjsplugin()])} 3。浏览器缓存管理

用户的浏览器缓存您网站的文件，以便只有当浏览器没有本地副本或本地副本已过期时，才可以下载这些文件。

如果您的所有代码都在一个文件中，进行微小的更改意味着再次下载整个文件。

理想情况下，您希望用户尽可能少地下载，因此明智的做法是将应用程序很少更改的代码与频繁更改的代码分开。

供应商文件

Common Chunks插件可以将您的供应商代码(例如，不太可能频繁更改的依赖项，如Vue.js库)与您的应用程序代码(每次部署时都可能更改的代码)分开。

您可以配置插件来检查依赖项是否来自node_modules文件夹，如果是，将其输出到单独的文件供应商。

new web pack . optimize.commonschunk plugin({ name : ' vendor '，minchunk s 3360 function(module){ return module . context module . context . indexof(' node _ modules ')！==-1;}})如果这样做，您现在将在构建输出中有两个单独的文件，它们将由浏览器独立缓存：

script src=' http : vendor . js ' charset=' utf-8 '/script script src=' http : app . js ' charset=' utf-8 '/script指纹识别

当构建文件改变时，我们如何破坏浏览器的缓存？

默认情况下，只有当缓存文件过期或用户手动清除缓存时，浏览器才会再次向服务器请求文件。

如果服务器指示文件已更改，将再次下载该文件(否则，服务器返回HTTP 304未修改)。

为了节省不必要的服务器请求，我们可以在每次文件内容发生变化时更改文件名称，从而强制浏览器再次下载文件。一个简单的系统可以通过向文件名附加一个散列来为其添加一个“指纹”:

Common Chunks插件将发出“chunkhash”，如果文件的内容发生了变化，它将被更新。输出时，网络包可以将此哈希附加到文件名中：

输出： {文件名： '[名称]。[区块哈希]。js'}，当您执行此操作时，您将看到输出文件的名称类似于app.3b80b7c17398c31e4705.js

自动注入构建文件

当然，如果添加哈希，必须更新索引文件中对文件的引用，否则浏览器不会知道哈希：

script src=' http : app . 3b 80 b7c 17398 c31e 4705 . js '/script手动完成这项工作非常繁琐，请使用HTML Webpack插件为您完成。插件可以在绑定过程中自动将构建文件的引用注入到HTML文件中。

首先删除对生成文件的引用：

！DOCTYPE html html head meta charset=' utf-8 ' title test-6/title/head body div id=' app '/div！内置文件应该放在这里，但会自动注入-/body/html，并将HTML Webpack插件添加到您的Webpack配置中：

新的html webpackplugin({ filename : ' index . html ' template 3360 ' index . html '，inject: true，chunkssortmode 3360 ' dependency ' })，现在，哈希生成文件将自动添加到索引文件中。此外，您的index.html文件现在将包含在捆绑输出中，因此您可能需要告诉网络服务器它的位置已经更改。

4.代码拆分

默认情况下，Webpack将所有应用程序代码输出到一个大的包中。但是，如果您的应用程序有多个页面，拆分代码会更高效，因此每个单独的页面代码都位于一个单独的文件中，并且只有在需要时才加载Webpack有一个名为“代码拆分”的功能。在Vue.js中实现这个功能需要异步组件，通过Vue Router变得更加容易。

异步组件

异步组件不将定义对象作为第二个参数，但是具有Promise函数来解析定义对象，例如：

Vue.component('async-component '，function (resolve，reject){ setTimeout(()={ resolve({//Component definition包括道具、方法等。});}，1000)})Vue只在组件实际需要渲染的时候调用这个函数。它还缓存结果以备将来重新渲染。如果我们设计应用程序，使每个“页面”都是一个组件，并将定义存储在服务器上，那么我们将完成一半的代码拆分。

需要

要从服务器加载异步组件的代码，请使用Webpack require语法。这将指示Webpack在构建时将异步组件捆绑在一个单独的捆绑包中。更好的是，Webpack将使用AJAX来处理这个包的加载，所以您的代码可以像这样简单：

Vue.component('async-component '，function (resolve) { require([)。/AsyncComponent.vue']，resolve)})；惰性加载

在Vue.js应用程序中，vue-router通常是您用来将spa组织成多个页面的模块。延迟加载是使用Vue和Webpack进行代码拆分的一种正式方法。

const home page=resolve=require([)。/HomePage.vue']，resolve)；const rouunter=newvue router的翻译到此结束({route: [{path:'/'，name:' homepage '，component: homepage}]})。以上就是本文的全部内容。我希望它能帮助你学习和支持我们。