webpack代码拆分_使用webpack代码拆分

webpack代码拆分

Code splitting will allow you to reduce the size of your main JavaScript file by splitting it up into different files and lazy load these as and when they’re required.

通过代码拆分，您可以将主JavaScript文件拆分为不同的文件，并在需要时延迟加载这些文件，从而减小其大小。

This is a very important feature when building a single page application as your JavaScript file could be very large, this means that your page will need to wait for this to download before the page can be started.

当构建单个页面应用程序时，这是一个非常重要的功能，因为您JavaScript文件可能非常大，这意味着您的页面需要等待此文件下载后才能启动页面。

Using code splitting you can split up your code into multiple files and only download the files your app needs to display the page. For example if you only use a component on a single page you don’t need to load in that component on every page of your app, using code splitting Webpack can lazy load in that component only when it is needed.

使用代码拆分，您可以将代码拆分为多个文件，并且仅下载应用程序显示页面所需的文件。 例如，如果仅在单个页面上使用组件，则无需在应用程序的每个页面上加载该组件，则使用代码拆分Webpack可以仅在需要时才在该组件中延迟加载。

To be able to load in script dynamically you’ll need to use the Javascript feature of import but not the keyword as this is static, the function import().

为了能够动态加载脚本，您需要使用import的Javascript功能，但不能使用关键字import() ，因为它是静态的，它是import()函数。

First you’ll need to install a babel plugin for dynamic import.

首先，您需要安装babel插件以进行动态导入。

npm install babel-plugin-syntax-dynami