Всем привет. Есть проект, использующий webpack. При сборке приложения, файл main.js имеет размер 8.94 Мб. Установил утилиту webpack-bunlde-analyzer. Данная утитита выдает размер 2.99 Мб. Размер папки ClientApp 421 Кб.
Пробовал вариант Code splitting, но мне нужно без этого. Пытался так:
`resolve: {
modules: ['app', 'node_modules'],
extensions: [ '.js', ],
mainFields: [ 'browser', ],
alias: { 'lodash-es': 'lodash' }
}`
Выдает ошибку Uncaught Error: Cannot find module "event-source-polyfill"
.
В чем может быть проблема? Могу ли как-нибудь снизить размер webpack?
package.json
{
"name": "ImgApp",
"private": true,
"version": "0.0.0",
"devDependencies": {
"@types/webpack-env": "^1.13.5",
"aspnet-webpack": "^2.0.3",
"babel-plugin-transform-object-rest-spread": "^6.26.0",
"compression-webpack-plugin": "3.0.0",
"bootstrap-vue": "2.0.0-rc.9",
"css-loader": "^0.25.0",
"event-source-polyfill": "^0.0.7",
"extract-text-webpack-plugin": "^2.1.2",
"isomorphic-fetch": "^2.2.1",
"aos": "2.3.4",
"bootstrap": "4.3.1",
"font-awesome": "4.7.0",
"jquery": "^3.3.1",
"node-sass": "^4.5.3",
"sass-loader": "^6.0.6",
"style-loader": "^0.13.1",
"url-loader": "^0.5.7",
"webpack": "^2.7.0",
"webpack-hot-middleware": "^2.21.0",
"vuelidate": "0.7.4",
"vue-cropperjs": "4.0.0",
"vue-cookie": "1.1.4",
"masonry": "0.0.2",
"masonry-layout": "4.2.2",
"vue-masonry": "0.11.7",
"vue-progressive-image": "3.2.0",
"vue-masonry-css": "1.0.3",
"@aspnet/signalr": "1.1.4",
"axios-progress-bar": "1.2.0"
},
"dependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-polyfill": "^6.26.0",
"babel-preset-env": "^1.6.1",
"babel-preset-stage-3": "^6.24.1",
"vue": "^2.5.13",
"vuex": "3.1.0",
"vue-loader": "^14.0.3",
"vue-router": "^3.0.1",
"vue-template-compiler": "^2.5.13",
"vue-image-upload": "1.0.1",
"vue2-editor": "2.6.6",
"axios": "0.18.0",
"webpack-bundle-analyzer": "3.4.1",
"lodash": "4.17.15"
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
]
}
webpack.config.js
var path = require('path')
var webpack = require('webpack')
const bundleOutputDir = './wwwroot/dist';
var CompressionPlugin = require('compression-webpack-plugin');
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
module.exports = {
context: __dirname,
entry: { main: './App/index.js' },
module: {
rules: [
{
test: /\.css$/,
use: [
'vue-style-loader',
'css-loader'
],
},
{
test: /\.vue$/,
loader: 'vue-loader',
options: {
loaders: {
'scss': [
'vue-style-loader',
'css-loader',
'sass-loader'
],
'sass': [
'vue-style-loader',
'css-loader',
'sass-loader?indentedSyntax'
]
}
}
},
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/
},
{
test: /\.(png|jpg|gif|svg)$/,
loader: 'file-loader',
options: {
name: '[name].[ext]?[hash]'
}
}
]
},
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js',
'lodash': 'lodash/core'
},
extensions: ['*', '.js', '.vue', '.json'],
modules: ['app', 'node_modules']
},
devServer: {
historyApiFallback: true,
noInfo: true,
overlay: true
},
performance: {
hints: false
},
output: {
path: path.join(__dirname, bundleOutputDir),
filename: '[name].js',
publicPath: 'dist/'
},
devtool: '#eval-source-map',
plugins: [new BundleAnalyzerPlugin()]
}
if (process.env.NODE_ENV === 'production') {
module.exports.devtool = '#source-map'
module.exports.plugins = (module.exports.plugins || []).concat([
new webpack.optimize.UglifyJsPlugin({
cache: true,
parallel: true,
sourceMap: false,
extractComments: 'all',
uglifyOptions: {
compress: true,
output: null
}
}),
new webpack.LoaderOptionsPlugin({
minimize: true
}),
new CompressionPlugin()
])
}
Айфон мало держит заряд, разбираемся с проблемой вместе с AppLab
Проблема в том что есть n кол-во файлов cssНужно их объединить, что бы все классы были в одном файле