为了保存不必要的服务器请求，我们可以在每次内容更改时更改文件的名称，以强制浏览器重新下载。 这样做的一个简单系统是通过附加一个哈希来为文件名添加一个“fingerprint”，例如：
Common Chunks插件发出一个“chunkhash”，如果文件的内容已经更改，它将被更新。 当它们输出时，Webpack可以将这个哈希追加到文件名中：
output: { filename: '[name].[chunkhash].js' },
当你这样做时，你会看到你输出的文件将具有像app.3b80b7c17398c31e4705.js这样的名称。
3.3 自动注入构建文件
当然，如果你添加一个哈希，你必须更新索引文件中的文件的引用，否则浏览器将不会知道它：
<script src="https://www.jb51.net/app.3b80b7c17398c31e4705.js"></script>
这将是一个非常繁琐的工作，手动执行，所以使用HTML Webpack插件为你做。 该插件可以在捆绑过程中自动将构建文件的引用注入到HTML文件中。
首先删除对构建文件的引用：(index.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 Plugin添加到Webpack config中：
new HtmlWebpackPlugin({ filename: 'index.html' template: 'index.html', inject: true, chunksSortMode: 'dependency' }),
这样配置完成之后在index.html中就会自动引用构建的文件
4.代码分割
默认情况下，Webpack会将你的所有应用程序代码输出为一个大捆绑文件。 但是，如果你的应用程序有多个页面，则使用分割代码将更有效，
每个单独的页面代码都在单独的文件中，并且仅在需要时加载是更好的选择。
Webpack有一个名为“代码分割”的功能，正是这样。 在Vue.js中实现这一点也需要异步组件，并且通过Vue Router变得更加容易。
4.1 异步组件
异步组件不是将定义对象作为其第二个参数，而是具有解析定义对象的Promise函数，例如：
Vue.component('async-component', function (resolve, reject) { setTimeout(() => { resolve({ // Component definition including props, methods etc. }); }, 1000) })
当组件实际需要呈现时，Vue将只调用该函数。 它还将缓存未来重新渲染的结果。
如果我们构建我们的应用程序，因此每个“页面”都是一个组件，并且我们将定义存储在我们的服务器上，那么我们就是中断实现代码分割的途径。
4.2 require要求
要从服务器加载异步组件的代码，请使用Webpack require语法。 这将指示Webpack在构建时将单独的软件包中的async组件捆绑在一起，
而且更好的是，Webpack将使用AJAX处理此捆绑包的加载，因此你的代码可以简单如下：
Vue.component('async-component', function (resolve) { require(['./AsyncComponent.vue'], resolve) });
4.3 懒加载 (router.js)
在路由配置文件中一般的都是直接导入比如
import HomePage from './HomePage '
如果想路由页面只在用到时候加载可以修改如下
const HomePage = resolve => require(['./HomePage.vue'], resolve); const rounter = new VueRouter({ routes: [ { path: 'https://www.jb51.net/', name: 'HomePage', component: HomePage } ] })
以上所述是小编给大家介绍的使用Webpack提高Vue.js应用的方式汇总(四种)，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
您可能感兴趣的文章: