为了节省不必要的服务器请求，我们可以在每次文件内容更改时更改其名称，以强制浏览器重新下载该文件。一个简单的系统可以通过在文件名后附加一个哈希来为文件名添加“指纹”：
Common Chunks插件会发出“ chunkhash”，如果文件内容已更改，则将对其进行更新。 Webpack可以在输出文件名时将此哈希附加到文件名中：
output: { filename: '[name].[chunkhash].js' },
执行此操作时，您将看到输出的文件将具有类似app.3b80b7c17398c31e4705.js的名称。
Auto inject build files
当然，如果添加哈希，则必须更新索引文件中对该文件的引用，否则浏览器将不知道该哈希：
<script src="https://www.jb51.net/app.3b80b7c17398c31e4705.js"></script>
手动完成这项工作非常繁琐，因此请使用HTML Webpack插件为您完成。该插件可以在捆绑过程中自动将对构建文件的引用注入到HTML文件中。
首先删除对构建文件的引用：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>test-6</title> </head> <body> <div></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: 'https://www.jb51.net/', name: 'HomePage', component: HomePage } ]})翻译到此为止了，以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
您可能感兴趣的文章: