Когда веб-пакет разрабатывается локально, часто бывает, что скорость разработки и упаковки очень низкая.В отеле сейчас около 59 страниц, все из которых загружены лениво, но теперь каждый кусок упаковывает большой пакет. Оптимизируйте следующим образом:
Анализ упакованных файлов перед оптимизацией
Видно, что каждый фрагмент очень большой, а некоторые достигают 1M.
использоватьwebpack-bundle-analyzer
Проанализируйте выходной файл, как показано ниже:
Видно, что lodash был упакован много раз, что привело к загрузке lodashchunk
Здорово.
Отредактируйте один из фрагментов ниже и сохраните его, как показано ниже.
Время переупаковки достигло 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)
}),
Посмотрим еще раз:
Размер каталога упакованных файлов
Видно что сильно уменьшилось.В это время редактор перепаковывал и обнаружил что всего около 1094мс,что уже намного меньше,но каждый раз запаковывалось
отindex.hash.js
Он по-прежнему большой, и объем не уменьшился. первый взгляд на структуру
Видно, что моменты занимают много места, но очевидно, что моменты были извлечены и упакованы для общедоступных пакетов, как показано ниже:
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';
Эта строка, момент был снова переупакован, теперь уже после удаления этой строки.
Теперь посмотрите на процесс упаковки.
Индексный файл напрямую уменьшился с 814 до 276 КБ. Оптимизация завершена, смотрите файл пакета:
Перезагрузить после редактирования одного фрагмента
Теперь фрагмент также содержит jquery.js, потому что для minChunk:3 установлено значение 3. Поскольку в бизнесе используется jqeury.fancyTree.js, модуль загрузит jquery.js.
Значит будет так.Теперь для оптимизации добавим,чтобы загрузка раньше искала переменную window.$.
'jquery':'window.$',
,
Итак, вся оптимизация завершена.