[英]How else can i optimize my bundle and improve page speed?
我有一個React應用程序,其中使用了許多庫,例如redux,redux形式,react-router,leaflet,react-bootstrap,redux-thunk等。 我的捆綁包大小最小為531kb,供應商文件最小為5.32mb。
我已經使用webpack進行捆綁和優化。 我也使用了webpack中的代碼拆分和React Router。 還可以采取其他措施來提高速度並減小體積,以獲得更好的性能。 有誰有什么想法要分享嗎?
const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const VENDOR_LIBS = [
'react', 'lodash', 'axios', 'base-64', 'leaflet', 'leaflet-routing-machine',
'moment', 'react-bootstrap', 'react-dates', 'react-dom', 'react-geosuggest',
'react-google-places-suggest', 'react-input-range', 'react-intl', 'react-leaflet',
'react-masonry-component', 'react-redux', 'react-router', 'react-router-redux',
'react-slick', 'redux', 'redux-form', 'redux-thunk'
];
const config = {
entry: {
bundle: './src/index.js',
vendor: VENDOR_LIBS,
},
output: {
path: path.resolve(__dirname, 'dist'),
filename: '[name].[chunkhash].js',
},
module: {
rules: [
{
loader: ExtractTextPlugin.extract({
loader: 'css-loader'
}),
test: /\.css$/,
},
{
use: 'babel-loader',
test: /\.js$/,
exclude: /node_modules/,
},
{
use: [
{
loader: 'url-loader',
options: { limit: 40000 }
},
'image-webpack-loader'
],
test: /\.(jpe?g|png|gif|svg|woff|woff2|eot|ttf)$/,
},
{
test: /masonry|imagesloaded|fizzy\-ui\-utils|desandro\-|outlayer|get\-size|doc\-ready|eventie|eventemitter/, // eslint-disable-line
loader: 'imports-loader?define=>false&this=>window'
}
],
},
plugins: [
new webpack.optimize.CommonsChunkPlugin({
names: ['vendor', 'manifest']
}),
new HtmlWebpackPlugin({
template: 'src/index.html'
}),
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)
}),
new ExtractTextPlugin('style.css'),
],
devServer: {
historyApiFallback: true,
hot: true
},
};
if (process.env.NODE_ENV === 'production') {
config.plugins.push(
new webpack.optimize.UglifyJsPlugin({
output: {
comments: false
}
})
);
}
module.exports = config;
routes.js
const routes = {
component: App,
path: '/',
childRoutes: [
{
component: HomeLayout,
indexRoute: { component: Apartament },
childRoutes: [
{
path: 'apartamentos',
getComponent(location, cb) {
System.import('./containers/homescreen/apartament-form')
.then(module => cb(null, module.default));
}
},
{
path: 'signup',
getComponent(location, cb) {
System.import('./containers/homescreen/signup')
.then(module => cb(null, module.default));
}
},
{
path: 'login',
getComponent(location, cb) {
System.import('./containers/homescreen/login')
.then(module => cb(null, module.default));
}
}
],
},
{
component: ResultLayout,
childRoutes: [
{
path: 'car',
getComponent(location, cb) {
System.import('./containers/result/car-result')
.then(module => cb(null, module.default));
}
},
]
}
]
};
還有其他技巧/想法,例如代碼拆分和shouldComponentUpdate嗎?
對不起,我的英語不好。
實施@Tholle想法后進行更新
您可以使用NoErrorsPlugin
並將選項微調到HtmlWebpackPlugin
和UglifyJsPlugin
來使包更小:
const config = {
...,
plugins: [
new webpack.optimize.CommonsChunkPlugin({
names: ['vendor', 'manifest']
}),
new webpack.NoErrorsPlugin(),
new HtmlWebpackPlugin({
inject: true,
template: 'src/index.html',
minify: {
removeComments: true,
collapseWhitespace: true,
removeRedundantAttributes: true,
useShortDoctype: true,
removeEmptyAttributes: true,
removeStyleLinkTypeAttributes: true,
keepClosingSlash: true,
minifyJS: true,
minifyCSS: true,
minifyURLs: true
}
}),
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)
}),
new webpack.optimize.OccurrenceOrderPlugin(),
new ExtractTextPlugin('style.css')
]
};
if (process.env.NODE_ENV === 'production') {
config.plugins.push(
new webpack.optimize.UglifyJsPlugin({
compress: {
screw_ie8: true,
warnings: false
},
mangle: {
screw_ie8: true
},
output: {
comments: false,
screw_ie8: true
}
})
);
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.