Webpack是开发Vue.js单页应用程序的重要工具。通过管理复杂的构建步骤，您可以更轻松地开发工作流并优化应用程序的规模和性能。

它介绍了以下四种方式：

单文件组件优化Vue构建浏览器缓存管理代码分段1。单文件组件

Vue的一个特殊功能是使用HTML作为组件模板。然而，它们有一个固有的问题：您的HTML标记需要是一个笨拙的JavaScript字符串，

否则，您的模板和组件定义将需要在单独的文件中，使它们难以使用。

Vue有一个优雅的解决方案，叫做单文件组件(SFC)，它包括模板、组件定义和CSS，所有这些都在一个整洁的。vue文件：

以下模块mycomponent.vue(html js css)

模板div id='我的组件'./div/模板脚本导出默认值{.}/脚本样式# my-component {.}/style sfc是通过vue-loader Webpack插件实现的。加载器将SFC的语言块和管道划分为合适的加载器，例如脚本块转移到babel-loader，模板块转移到Vue-template-loader。

将模板转换为JavaScript呈现功能。

vue-loader的最终输出是一个可以包含在Webpack包中的JavaScript模块。

vue-loader的典型配置如下：(webpack.base.conf.js)

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

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

*请记住，单个文件组件模板是在开发中预先编译的，用于呈现函数！

Vue.js的库中只有一个运行时版本，包含了Vue.js除了模板编译器(称为vue.runtime.js)之外的所有功能。它比完整版小20KB左右，如果可能的话，值得使用。

默认使用运行时版本，所以每次导入需要的文件都使用“vue”的import vue

通过别名简化文件中繁琐的路径引用：(webpack.base.conf.js)

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

减少Vue.js构建大小的另一种方法是删除生产中的任何错误消息和警告。消除不必要的代码并减少输出包的大小

我们只能在生产环境中设置这些警告。

if (process.env.NODE_ENV！==“production”){ warn(“‘info’: “”(err . tostring())“”)中的“错误”，VM)；}如果process.env.NODE_ENV设置为production，则可以在构建过程中通过解析器自动从代码中删除这些警告块。

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

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

用户的浏览器将缓存您站点的文件

如果所有的代码都在一个文件中，稍有变化就意味着需要重新下载整个文件。

理想情况下，您希望用户尽可能少地下载，因此最好将很少更改的代码与应用程序中频繁更改的代码分开

3.1供应商文件

这个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;}})最后，构建输出中有两个单独的文件，它们将由浏览器独立缓存：

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

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

默认情况下，只有当缓存文件过期或用户手动清除缓存时，浏览器才会再次向服务器请求缓存文件。如果服务器指示文件已更改，将再次下载该文件(否则，服务器返回HTTP 304未修改)。

为了节省不必要的服务器请求，我们可以在每次内容更改时更改文件名，以强制浏览器再次下载。一个简单的系统是通过附加一个散列来给文件名添加一个“指纹”，例如：

Common Chunks插件会发出一个“chunkhash”，如果文件的内容发生了变化，它就会被更新。当它们被输出时，Webpack可以将这个散列附加到文件名中：

输出： {文件名： '[名称]。[区块哈希]。js'}，当你这样做的时候，你会看到你输出的文件会有一个像app.3b80b7c17398c31e4705.js这样的名字

3.3构建文件的自动注入

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

script src=' http : app . 3b 80 b7c 17398 c31e 4705 . js '/script这将是一个非常繁琐的任务，需要手动执行，所以使用HTML Webpack插件为您完成。插件可以在绑定过程中自动将构建文件的引用注入到HTML文件中。

首先删除对构建文件的引用：(index.html)

！DOCTYPE html html head meta charset=' utf-8 ' title test-6/title/head body div id=' app '/div！内置文件应该在这里，但将被自动注入-/正文/html，并将html网络包插件添加到网络包配置中：

新的html webpackplugin({ filename : ' index . html ' template 3360 ' index . html '，inject: true，chunkssortmode 3360 ' dependency ' })，这样在配置完成后，构建的文件将在index.html自动引用

4.代码分段

默认情况下，Webpack会将您的所有应用程序代码输出为一个大的捆绑文件。但是，如果您的应用程序有多个页面，使用拆分代码会更有效。

每个单独的页面代码都在一个单独的文件中，最好只在需要时加载。

Webpack有一个叫“代码划分”的功能，完全一样。在Vue.js中实现这一点也需要异步组件，通过Vue Router变得更加容易。

4.1异步组件

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

Vue.component('async-component '，function (resolve，reject){ setTimeout(()={ resolve({//Component definition包括道具、方法等。});}，1000)})当组件实际需要渲染时，Vue只会调用这个函数。它还会缓存未来重新渲染的结果。

如果我们构建应用程序，使每个“页面”都是一个组件，并将定义存储在服务器上，那么我们就中断了实现代码划分的方式。

4.2要求

要从服务器加载异步组件的代码，请使用Webpack require语法。这将指示Webpack在构建时将异步组件捆绑在单独的包中。

更好的是，Webpack将使用AJAX来处理这个包的加载，因此您的代码可以像下面这样简单：

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

在路由配置文件中，它通常是直接导入的，例如

从“”导入主页。/HomePage。如果希望仅在使用路由页面时才加载它们，可以按如下方式修改它们

const home page=resolve=require([)。/HomePage.vue']，resolve)；const rouunter=new vue router({ route :[{ path 3360 '/'，name3360' homepage '，component3360 homepage}]})以上是利用边肖推出的Webpack改进Vue.js应用的四种方法的总结，希望对大家有所帮助。如果您有任何问题，请非常感谢您对我们网站的支持！