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

时间 2019-11-05

标签使用 webpack 提升 vue.js vue 应用程序方式栏目 JavaScript 繁體版

原文原文链接

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

原文地址javascript

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

在本文中，我将解释Webpack能够加强您的Vue应用程序的四种方式，其中包括：vue

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

关于vue-cli？

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

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

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未修改）。

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

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