乐趣区

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

jiezi

本文翻译自，翻译技巧不太好，不喜勿碰：
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

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

1. Single file components

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

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

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

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

Fingerprinting

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

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

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

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

Auto inject build files

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

<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 服务器其位置已更改

4. Code splitting

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

Async components

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

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

Vue 仅在组件实际需要渲染时才调用该函数。它还会缓存结果以供将来重新渲染。
如果我们设计应用程序，使每个“页面”都是一个组件，并且将定义存储在服务器上，那么我们就完成了代码拆分的一半。

require

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

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

Lazy loading

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

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

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

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

退出移动版