Решение для большого файла после упаковки webpack

использовалиcreate-react-appэти лесаreactРазработка, а позже из-за некоторых пользовательских конфигураций, обратились к использованиюwebpackСоздайте свой собственный набор строительных лесов. но используяwebpackПосле упаковки я узнал, Нани? Почему файл такой большой? ? ? Вот я и понял как с этим боротьсяwebpackЕсли файл слишком велик после упаковки, просто запишите его.

Сначала настройте глобальные переменные

Во-первых, указав среду, скажитеwebpackмы в настоящее время вproductionсреда, по мнениюproductionспособ упаковки.

 //指定环境，将process.env.NODE_ENV环境与library关联
 new Webpack.DefinePlugin({
	'process.env.NODE_ENV': JSON.stringify('production'),
 }),

оптимизацияdevtoolсерединаsource-map.

dev-toolпредоставляет множество возможностей для улучшения нашегоdebugвозможности, с которыми мы знакомы:source-map,inline-source-map,cheap-source-mapи т.п. Подробное использование см.Официальная документация Devtool,Сравнение конфигурации Devtool,Опции Webpack SourceMap Некоторые интерпретации, https://webpack.github.io/docs/configuration.html#devtool Если ваш файл после упаковки вдруг стал на несколько мегабайт, то не думайте об этом, должно быть потому чтоsource-mapпричина.source-mapЭто действительно полезно на этапе разработки и легко отлаживается, но его не обязательно развертывать в производственной среде. рекомендуется вprodзакрытая средаsource-map.

Разделите файл css и упакуйте его отдельно

Установитьwebpackплагинextract-text-webpack-plugin.npm install extract-text-webpack-plugin --save-dev. Инструкции:

plugins:[
 new ExtractTextPlugin('static/css/styles.[contenthash].css'),
]

используется здесьcontenthash,webpackбудет генерироваться в соответствии с содержаниемhashстоимость.

использоватьUglifyJSPluginсжатие.

пройти черезUglifyJSPluginможет сжать наш*.jsдокумент. способ установки:npm install uglifyjs-webpack-plugin --save-dev. Применение:Подробное использование UglifyJSPlugin

const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
module.exports = {
  plugins: [
     new UglifyJSPlugin({
            parallel: 4,
            uglifyOptions: {
                output: {
                    comments: false,
                    beautify: false,
                },
                compress: {
                    warnings: false
                },
            },
            cache: true,
        }),
  ]
}

Извлечение общих зависимостей

использоватьCommonsChunkPluginплагины, объединяющие несколькоjsФайл извлекается для создания отдельного файла. Этот файл содержит некоторые общие модули, так что браузер загружает его только один раз в начале и кэширует для последующего использования. Вместо того, чтобы загружать файл большего размера каждый раз, когда вы посещаете новый интерфейс.

 entry:{
	app:'./entry',
	vendor:['react','other-lib'],
 },
 plugins:[
	 new Webpack.optimize.CommonsChunkPlugin({
	     name: 'vendor',
	 }),
 ]

включить сжатие gzip

Мы используемcompression-webpack-pluginплагин для сжатия. Установить:npm install compression-webpack-plugin --save-dev.Подробное использование плагина Compression-webpack-pluginиспользовать:

const CompressionPlugin = require("compression-webpack-plugin");
plugins:[
new CompressionPlugin({
	 asset: '[path].gz[query]', //目标资源名称。[file] 会被替换成原资源。[path] 会被替换成原资源路径，[query] 替换成原查询字符串
     algorithm: 'gzip',//算法
     test: new RegExp(
          '\\.(js|css)$'    //压缩 js 与 css
     ),
     threshold: 10240,//只处理比这个值大的资源。按字节计算
     minRatio: 0.8//只有压缩率比这个值小的资源才会被处理
})
]

Результат сжатия:

Включите сжатие html и автоматически добавьте сгенерированные выше статические ресурсы.

Добавить плагинhtml-webpack-pluginУстановить:npm install html-webpack-plugin --save-devПрименение:

plugins:[
  new HtmlWebpackPlugin({
      title: '',
         template: __dirname + '/../public/index.html',
         minify: {
             removeComments: true,
             collapseWhitespace: true,
             removeRedundantAttributes: true,
             useShortDoctype: true,
             removeEmptyAttributes: true,
             removeStyleLinkTypeAttributes: true,
             keepClosingSlash: true,
             minifyJS: true,
             minifyCSS: true,
             minifyURLs: true,
         },
         chunksSortMode:'dependency'
     }),
]