For a better reading experience, please go directly to my personal website:www.pilishen.com/posts/using…

Dynamic imports have been supported by default since Laravel Mix (4.0.16). Dynamic splitting is a code-splitting technique that allows us to split JS components, third-party libraries, and other modules into separate files. For example, in a project where you use several JS components and have a lot of vuejs or React components, you will end up with app.js or bundle.js files that are very large, often exceeding 1M+. This will slow down your site’s loading speed, especially if users are on a slow connection.

Code-splitting is a way to split a large file into many smaller files, so that each file only has tens or hundreds of KB instead of M, which can greatly improve the loading speed. Because they are cut apart, you can start loading only the most wanted piece of JS file, only load the page used, those temporarily not used, or in other pages only used, can automatically download behind, does not affect the initial page rendering time.

Configuring Dynamic Import

{id=”Configuring”}

First you have to upgrade Laravel Mix to version 4.0.16 or higher to use dynamic import.

through.babelrcFile to configure

Next, create a.babelrc file in the root directory of your project, or if you already have one, modify it. In this file, add @babel/plugin-syntax-dynamic-import to the “plugins” array. This will enable the automatic import plugin already included in Laravel Mix.

{
  "plugins": [
    "@babel/plugin-syntax-dynamic-import"]}Copy the code

throughwebpack.mix.jsFile to configure

Of course, if you don’t want to create the above.babelrc file and you’re not familiar with Babel and its configuration, you can also configure it in the mix configuration file (webpack.mix.js) by adding the following code:

mix.babelConfig({
  plugins: ['@babel/plugin-syntax-dynamic-import']});Copy the code

So you don’t have to create or change the.babelrc file

The actual use of dynamic import

{id=”Using”}

It turns out that we’re importing a JS component, which usually looks like this:

// Standard or static import Component from'./components/ExampleComponent.vue';
Copy the code

Now, if we want to dynamically import a component, that is, import and load it only when it is used on the page, we can write:

// Dynamic import of const Component = () => import('./components/ExampleComponent.vue');
Copy the code

By default, Webpack will slice these dynamically introduced components into separate files named 0.js, 1.js and so on.

For Laravel Mix, you can use the name of each cut block, follow the hash value of the piece of content, and follow the.js extension. If you want to specify the name of each partition file, you can add a comment like this in front of the component path when importing dynamically

const Component =
        () => import(/* webpackChunkName: "dynamically-imported-component"* /'./components/ExampleComponent.vue');
Copy the code

You can see here that there is a comment /* webpackChunkName: “Jenicle-imported – Component” */ in front of the vue component path, which tells Webpack that I want this file to be named this way. So the resulting file name is jeniculent-imported component.[hash].js

Use dynamic import in vue-Router

{id=”router”}

If you use vue-Router in your project, you can also use dynamic import to split each page into separate files, as follows:

const routes = [
  {
    name: 'dashboard',
    path: '/dashboard',
    component:
      () => import(/* webpackChunkName: "dashboard"* /'./pages/Dashboard.vue'),},];Copy the code

Advanced usage: script preloading

{id=”prefetching”}

This is enough to speed up a lot of your pages, but we’re not satisfied. Now suppose we have two pages, page A and page B. Page A is A lightweight, component-free page, and page B uses A my-component.js that we’ve isolated.

At this point, if A user visits page A and clicks on page B, he will have to wait for the my-component.js file to load and process — we speed up page A’s load, but slow down page B’s. Because before the separation of JS files, when accessing A, the app.js file has been completely downloaded, and when accessing B page, there is no need to request, it is generally directly loaded from the browser cache.

If like, we can make the browser more intelligence, such as access to A page, we can expect him to visit the page B, then the browser can be in after loading A page script and resources, at the right time background page prefetching B I have to use the script, so when access page B, relevant documents ready.

Of course, this is not just an idea, but it is already supported by modern browsers. Using the traditional tag, we can actually declare that a file is pre-loaded, which is equivalent to fetching it from behind when the browser is idle.

<link
    rel="prefetch"
    href="/js/my-component.js"
    as="script"
>
Copy the code

When the script is loaded, the browser automatically gets the my-component.js file. When the script is loaded again, there is no need to load any more files.

conclusion

{id=”concolusion”}

Such a good function, quickly upgrade Mix, and then use in your project, I believe it can improve a lot of your website loading speed.

This is an extension of our series Laravel&Vue Deep Integration Second Edition. Remember that in the course we used Element-UI, the Vue Ui component developed by Ele. me, and we only used a few modules of Element-UI. As a result, our app.js file balloons to more than 1 MB. In practice, if you rely heavily on many UI components, it’s not uncommon for your package file to grow to several MB. Originally, we had to set up all kinds of Settings in WebPack, either to output the UI module we actually use, or to implement the file splitting effect described today, which is quite scary for those of you who are not familiar with WebPack. Mix now simply supports resource file splitting by default, which greatly addresses our concerns and allows you to be more bold and free to do things on many pages.

In the end, welcome to my site https://www.pilishen.com/ home oh, also welcome to join our public group: public class @ pilishen.com 】 【 109256050, waiting for you ~