使用Webpack提升Vuejs应用程序的4种方法翻译

共计 4462 个字符，预计需要花费 12 分钟才能阅读完成。

本文翻译自，翻译技巧不太好，不喜勿碰：
4 Ways To Boost Your Vue.js App With Webpack
众所周知，webpack 是开发 vue.js 单页面应用程序的必备工具，通过管理复杂的构建步骤，它可以使您的开发工作流程更加简单，并且可以优化应用程序的大小和性能。
在本文中，我将解释 Webpack 增强 Vue 应用程序的四种方法，包括：

Single file components  单文件组件
Optimising the Vue build  
Browser cache management
Code splitting

如果您使用模板从 vue-cli 构建应用程序，那么将提供预制的 Webpack 配置。它们已经过优化，没有任何改进建议！
但是，由于它们开箱即用的效果非常好，您可能对它们的实际功能并不太了解，对吗？
考虑一下本文，对 vue-cli 模板中使用的 Webpack 配置进行概述，因为它们包含了我在这里讨论的相同优化。

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

Vue 有一个优雅的解决方案，称为“单个文件组件（SFC）”，该文件将模板，组件定义和 CSS 都包含在一个简单的.vue 文件中：

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

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}
      }
    },
  ]
}

如果仅在 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 设置为生产，那么在构建过程中，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()])
}

用户的浏览器将缓存您网站的文件，以便仅在该浏览器尚无本地副本或本地副本已过期时才下载。

如果您所有的代码都在一个文件中，那么进行微小的更改就意味着需要重新下载整个文件。

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

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;
  }
})

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

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

当构建文件更改时，我们如何破坏浏览器的缓存？
默认情况下，仅当缓存的文件到期时，或者当用户手动清除缓存时，浏览器才会再次从服务器请求文件。
如果服务器指示文件已更改，则将重新下载该文件（否则服务器返回 HTTP 304 Not Modified）。
为了节省不必要的服务器请求，我们可以在每次文件内容更改时更改其名称，以强制浏览器重新下载该文件。一个简单的系统可以通过在文件名后附加一个哈希来为文件名添加“指纹”：

Common Chunks 插件会发出“chunkhash”，如果文件内容已更改，则将对其进行更新。Webpack 可以在输出文件名时将此哈希附加到文件名中：

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

执行此操作时，您将看到输出的文件将具有类似 app.3b80b7c17398c31e4705.js 的名称。

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

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

手动完成这项工作非常繁琐，因此请使用 HTML Webpack 插件为您完成。该插件可以在捆绑过程中自动将对构建文件的引用注入到 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 插件添加到您的 Webpack 配置中：

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

现在，带有哈希的构建文件将自动添加到索引文件中。另外，您的 index.html 文件现在将包含在捆绑输出中，因此您可能需要告诉 Web 服务器其位置已更改

默认情况下，Webpack 会将所有应用程序代码输出到一个大捆绑包中。但是，如果您的应用有多个页面，则拆分代码会更有效，因此每个单独的页面代码都位于单独的文件中，并且仅在需要时才加载
Webpack 具有一项称为“代码拆分”的功能。在 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 捆绑在一个单独的 bundle 中，更好的是，Webpack 将使用 AJAX 处理此 bundle 的加载，因此您的代码可以像这样简单：

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

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

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

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

翻译到此为止了，如果可以欢迎点赞关注我的公主号

关于 vue-cli

1. Single file components

2. Optimising the Vue build

Stripping out warnings and error messages in production

3. Browser cache management

Vendor file

Fingerprinting

Auto inject build files

4. Code splitting

Async components

require

Lazy loading

Just My Socks（注册教程内含优惠码）