[译]使用Webpack提高Vue.js应用程序的4种方式

原文地址

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

在本文中，我将解释Webpack可以增强您的Vue应用程序的四种方式，其中包括：

单文件组件
优化Vue构建
浏览器缓存管理
代码分割（code splitting）

关于vue-cli？

如果您使用的模板是从vue-cli构建应用程序，则会提供预制的Webpack配置。他们被很好的优化并且我没有任何可以改建的建议！

但是因为他们的工作很好，你可能不太清楚他们真正在做什么，对吗？考虑这篇文章对vue-cli模板中使用的Webpack配置的概述，就像它们包含我在这里讨论的相同的优化。

1. 单文件组件

Vue的特殊功能之一是使用HTML作为组件模板。尽管如此，它们还有一个内在的问题：您的HTML标记需要是一个尴尬的JavaScript字符串，否则您的模板和组件定义将需要在单独的文件中，使其难以使用。Vue有一个优雅的解决方案，称为单文件组件（SFC），其中包括模板，组件定义和CSS全部在一个整齐的.vue文件中：

MyComponent.vue

<template>
  <div id="my-component">...</div>
</template>
<script>
  export default {...}
</script>
<style>
  #my-component {...}
</style>

SFC通过vue-loader Webpack插件实现。该加载器将SFC的语言块和管道分成适当的加载程序，例如脚本块进入babel-loader，而模板块则转到Vue自己的vue-template-loader，将模板转换为JavaScript render函数。

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

典型配置vue-loader如下：

module: {
  rules: [
    {
      test: /\.vue$/,
      loader: 'vue-loader',
      options: {
        loaders: {
          // Override the default loaders
        }
      }
    },
  ]
}

2.优化Vue构建

运行时版本构建

如果您仅在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
  }
}

剥离生产中的警告和错误消息

减少Vue.js构建大小的另一种方法是删除生产中的任何错误消息和警告。这些输出包的大小与不必要的代码有关但是还是需要避免增加运行时的构建成本。

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

if (process.env.NODE_ENV !== 'production') {
  warn(("Error in " + 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 webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: '"production"'
      }
    }),
    new webpack.optimize.UglifyJsPlugin()
  ])
}

3.浏览器缓存管理

用户的浏览器将缓存您的站点的文件，只有在浏览器还没有本地副本或本地副本已过期时才会下载。

如果所有的代码都在一个文件中，那么一个微小的变化将意味着整个文件将需要重新下载。理想情况下，您希望用户尽可能少的下载，因此将您的应用程序很少更改的代码与其频繁更改的代码分开是非常明智的。

公共文件[译注:原文是vendor file]

CommonsChunkPlugin插件可以将公用的代码块分离出来（如依赖像Vue.js库，不可能经常改变）。

您可以配置插件以检查依赖项是否来自该node_modules文件夹，如果是，则将其输出到单独的文件中vendor.js：

new webpack.optimize.CommonsChunkPlugin({
  name: 'vendor',
  minChunks: function (module) {
    return module.context && module.context.indexOf('node_modules') !== -1;
  }
})

如果这样做，您将在构建输出中有两个单独的文件，这些文件将由浏览器独立缓存：

<script src="vendor.js" charset="utf-8"></script>
<script src="app.js" charset="utf-8"></script>

文件指纹

当构建文件发生更改的时候，我们怎么来更改浏览器的缓存？

默认情况下，只有当缓存文件过期的时候，或者是用户手动的清除了缓存文件的时候，浏览器才会再次向服务器请求文件。如果服务器表明这些文件被更改过了则文件将被重新下载（否则服务器返回HTTP 304未修改）。

为了保存不必要的服务器请求，我们可以在每次内容更改时更改文件的名称，以强制浏览器重新下载。一个简单的方法是通过附加一个哈希来为文件名添加一个“指纹”，例如：

e.g.hash

Common Chunks插件发出一个“chunkhash”，如果文件的内容已经更改，它将被更新。当它们输出时，Webpack可以将这个哈希追加到文件名中：

output: {
  filename: '[name].[chunkhash].js'
},

当您这样做时，您会看到您输出的文件将具有像app.3b80b7c17398c31e4705.js这样的名称。

自动注入构建文件

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

<script src="app.3b80b7c17398c31e4705.js"></script>

这将是一个非常繁琐的工作，手动执行，所以使用HTML Webpack Plugin帮您做。该插件可以在捆绑过程中自动将构建文件的引用注入到HTML文件中。

首先删除对构建文件的引用：

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>test-6</title>
  </head>
  <body>
    <div id="app"></div>
    <!-- built files should go here, but will be auto injected -->
  </body>
</html>

把HTML Webpack Plugin 添加到webpack配置中:

new HtmlWebpackPlugin({
  filename: 'index.html'
  template: 'index.html',
  inject: true,
  chunksSortMode: 'dependency'
}),

现在您的构建文件与哈希值将自动添加到您的索引文件。此外，您的index.html文件现在将包含在您的包输出中，因此您可能需要告知Web服务器文件已更改。

4.代码分割（code splitting）

默认情况下，Webpack会将您的所有应用程序代码输出到一个整合的js文件中。但是，如果您的应用程序有多个页面，则分割代码将更有效，因此每个单独的页面代码都在单独的文件中，并且仅在需要时加载。

Webpack有一个名为“code splitting”的功能，正是这样。在Vue.js中实现这一点也需要异步组件，并且通过Vue Router变得更加容易。

异步组件

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

Vue.component('async-component', function (resolve, reject) {
  setTimeout(() => {
    resolve({
      // Component definition including props, methods etc.
    });
  }, 1000)
})

当组件需要呈现时，Vue将调用该函数。它还将缓存未来重新渲染的结果。

如果我们构建我们的应用程序，因此每个“页面”都是一个组件，并且我们将定义存储在我们的服务器上，那么我们就有一些方法来实现代码的分割。

必须的部分

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

Vue.component('async-component', function (resolve) {
  require(['./AsyncComponent.vue'], resolve)
})

懒加载

Vue.js应用程序vue-router通常是用于将SPA组织到多个页面的模块。Lazy加载是使用Vue和Webpack实现代码分割的一种形式化方式。

const HomePage = resolve => require(['./HomePage.vue'], resolve);

const rounter = new VueRouter({
  routes: [
    {
      path: '/',
      name: 'HomePage',
      component: HomePage
    }
  ]
})

译注：部分翻译可能不太恰当，希望能有人指出相互提高。thanks

[译]使用Webpack提高Vue.js应用程序的4种方式