Когда я впервые использовал Webpack, я упаковал все файлы js в одинbuild.jsфайл (имя файла зависит отwebpack.config.jsв файлеoutput.filename), но в больших проектахbuild.jsВозможно, он слишком велик, что приводит к слишком долгой загрузке страницы. В настоящее время необходимоcode splitting, code splittingэто разбить файл на куски(chunk), мы можем определить некоторые точки разделения(split point), файл разбивается на разделы в соответствии с этими точками разделения и загружается по запросу.

2. Роль разделения кода?

1. Сторонние библиотеки классов упакованы отдельно:
   Поскольку содержимое сторонней библиотеки классов принципиально не изменится, его можно отделить от бизнес-кода, чтобы можно было максимально использовать механизм кэширования браузера и сократить количество запросов.
2. Загрузка по требованию:
   Webpack поддерживает определение точек разделения черезrequire.ensureВыполнять по требованию.

3. Как выполнить разделение кода?

Приведенный ниже код основан наvue-cliизwebpack-simpleСозданный по шаблону презентационный документ

//cmd
vue init webpack-simple code_spliting_demo

(1) Сторонняя библиотека классов упакована отдельно.

Мы предполагаем, что проект вводитjquery.jsа такжеrespond.js, то мы можемwebpack.config.jsНастройте множественную запись для упаковки этих двух сторонних библиотек классов по отдельности.

• существуетwebpack.config.jsнастроить

  //webpack.config.js
  
  //在entry中添加相应第三方类库
  entry: {
      bundle: './src/main.js',
      vendor: ['./src/lib/jquery-1.10.2.min.js', './src/lib/respond.min.js']
  }
    
   //在plugins中添加CommonChunkPlugin
  plugins:[
      new webpack.optimize.CommonsChunkPlugin({ 
          name: 'vendor',  
          filename: 'vendor.bundle.js'  
      })
  ]
  

• воплощать в жизньnpm run build, В настоящее времяdistВ каталоге создаются два файла, а именноbuild.jsа такжеvendor.bundle.js

  

  Сгенерированные файлы после запуска сборки npm

• существуетindex.htmlВведено в, примечание:vendor.bundle.jsимеет приоритет надbuild.jsпредставлять

  //index.html
  
  <script src="/dist/vendor.bundle.js"></script>
  <script src="/dist/build.js"></script>
  

(2) Загрузка по требованию

мы можемrouterНастройте компоненты по требованию, чтобы обеспечить загрузку компонентов по требованию.Если некоторые отдельные файлы компонентов большие, загрузка по требованию может уменьшитьbuild.js, оптимизировать скорость загрузки (если размер компонента небольшой, то использование загрузки по требованию добавит дополнительныеhttp请求, но увеличилось время загрузки)

• Здесь мы добавляем 3 компонента, которыеA.vue, B.vue, C.vue

  //A.vue
  <template>
      <h1>这里是A.vue组件</h1>
  </template>
  
  //B.vue
  <template>
      <h1>这里是B.vue组件</h1>
  </template>
  
  //C.vue
  <template>
      <h1>这里是C.vue组件</h1>
  </template>
  

• Настроить в маршрутизации (примечание: это для удобства, это вapp.jsМаршруты добавлены в , в реальном проекте маршруты должны извлекаться отдельно)

  //app.js
  
  import Vue from 'vue'
  import App from './App.vue'
  import VueRouter from 'vue-router'
  Vue.use(VueRouter)
  
  //AMD规范的异步载入
  const ComA = resolve => require(['./components/A.vue' ], resolve);
  const ComB = resolve => require(['./components/B.vue' ], resolve);
  const ComC = resolve => require(['./components/C.vue' ], resolve);
  
  const router = new VueRouter({
    routes: [
      {
        name: 'component-A',
        path: '/a',
        component: ComA
      },
      {
        name: 'component-B',
        path: '/b',
        component: ComB
      },
      {
        name: 'component-C',
        path: '/c',
        component: ComC
      }
    ]
  })
  
  new Vue({
    el: '#app',
    router: router,
    render: h => h(App)
  })
  

• существуетwebpack.config.jsнастроить вoutput.chunkFilename,

//webpack.config.js

output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist/',
    filename: 'build.js',
    //添加chundkFilename
    chunkFilename: '[name].[chunkhash:5].chunk.js'
}

• воплощать в жизньnpm run build, В настоящее времяdistВ каталоге создано 5 файлов, а дополнительные 3 файла соответствуютA.vue, B.vue, C.vueэти три компонента

  

  Файлы, сгенерированные после запуска сборки npm

Асинхронная загрузка спецификации CMD

Когда маршрут только что был импортирован, я использовалAMD规范Асинхронная загрузка .webpackпри условииrequire.ensure()Этот метод реализуетCMD规范асинхронная загрузка .Это такжеwebpackРекомендуемый способ загрузки Хотите узнать больше?ensure, Пожалуйста, нажмите«Разделение кода веб-пакета гарантирует, что я все еще не понимаю после прочтения, вы попали в меня»

• Код ниже используетrequire.ensure()метод настройки маршрутизации

//app.js

import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)

//AMD风格的异步加载
// const ComA = resolve => require(['./components/A.vue' ], resolve);
// const ComB = resolve => require(['./components/B.vue' ], resolve);
// const ComC = resolve => require(['./components/C.vue' ], resolve);

//CMD风格的异步加载
const ComA = resolve => require.ensure([], () => resolve(require('./components/A.vue')));
const ComB = resolve => require.ensure([], () => resolve(require('./components/B.vue')));
const ComC = resolve => require.ensure([], () => resolve(require('./components/C.vue')));

const router = new VueRouter({
  routes: [
    {
      name: 'component-A',
      path: '/a',
      component: ComA
    },
    {
      name: 'component-B',
      path: '/b',
      component: ComB
    },
    {
      name: 'component-C',
      path: '/c',
      component: ComC
    }
  ]
})

new Vue({
  el: '#app',
  router: router,
  render: h => h(App)
})

• воплощать в жизньnpm run buildназад,dist5 файлов также создаются в каталоге
  
  

  Файлы, сгенерированные после запуска сборки npm

• Демонстрация эффекта загрузки по требованию:
  
  

  Демонстрация эффекта загрузки по запросу