Запишите оптимизацию упаковки

внешний интерфейс JavaScript Webpack jQuery

Когда веб-пакет разрабатывается локально, часто бывает, что скорость разработки и упаковки очень низкая.В отеле сейчас около 59 страниц, все из которых загружены лениво, но теперь каждый кусок упаковывает большой пакет. Оптимизируйте следующим образом:

Анализ упакованных файлов перед оптимизацией

image

Видно, что каждый фрагмент очень большой, а некоторые достигают 1M.

использоватьwebpack-bundle-analyzerПроанализируйте выходной файл, как показано ниже:

image

Видно, что lodash был упакован много раз, что привело к загрузке lodashchunkЗдорово.

Отредактируйте один из фрагментов ниже и сохраните его, как показано ниже.

image

Время переупаковки достигло 2,592 с, при этом стартовый файлindex.0a8ac.jsДостиг841kb, сначала оптимизируйте каждыйlodashПроблема многократной загрузки.

Оптимизация общедоступных пакетов, таких как lodash

Добавить асинхронную общедоступную конфигурацию упаковки webpack


new webpack.optimize.CommonsChunkPlugin({
      name: 'index',
      // the name or list of names must match the name or names
      // of the entry points that create the async chunks
    

      children: true,
      // (use all children of the chunk)
    
      async: true,
      // (create an async commons chunk)
    
      minChunks: 3,
      // 必须至少3个chunk里面包含该文件才进行公共打包 (3 children must share the module before it's separated)
    }),

Посмотрим еще раз:

Размер каталога упакованных файлов

image

Видно что сильно уменьшилось.В это время редактор перепаковывал и обнаружил что всего около 1094мс,что уже намного меньше,но каждый раз запаковывалось

отindex.hash.jsОн по-прежнему большой, и объем не уменьшился. первый взгляд на структуру

image

Видно, что моменты занимают много места, но очевидно, что моменты были извлечены и упакованы для общедоступных пакетов, как показано ниже:

window.__REACT_LIB={
    React:React,
    ReactDOM:ReactDOM,
    ReactRouter:ReactRouter,
    antd:antd,
    moment:moment,
    backbone
};

Почему ты все еще собираешь вещи? Файл индекса — это код перед входным файлом, содержащим редукторы маршрутизации и другие маршрутизаторы, поэтому теперь мы ищем в app.js и находим следующий код:

import moment from 'moment';
import 'moment/locale/zh-cn';
moment.locale('zh-cn');

虽然webpack打包配置里面有下面的

externals:{
    'react':'window.__REACT_LIB.React',
    'react-dom':'window.__REACT_LIB.ReactDOM',
    'react-router':'window.__REACT_LIB.ReactRouter',
    'antd':'window.__REACT_LIB.antd',
    'backbone':'window.__REACT_LIB.backbone',
    'moment':'window.__REACT_LIB.moment',
  },

Но потому чтоimport 'moment/locale/zh-cn';Эта строка, момент был снова переупакован, теперь уже после удаления этой строки. Теперь посмотрите на процесс упаковки.

image

Индексный файл напрямую уменьшился с 814 до 276 КБ. Оптимизация завершена, смотрите файл пакета:

image

Перезагрузить после редактирования одного фрагмента

image

Теперь фрагмент также содержит jquery.js, потому что для minChunk:3 установлено значение 3. Поскольку в бизнесе используется jqeury.fancyTree.js, модуль загрузит jquery.js.

Значит будет так.Теперь для оптимизации добавим,чтобы загрузка раньше искала переменную window.$.

'jquery':'window.$',, Итак, вся оптимизация завершена.

image

Категории