build之后出现，请问有前辈知道怎么继续优化吗。网上都是说提高门槛的限制。我寻思是不是可以再切割一下。但是小弟实在是想不到还可以怎么切割了，求前辈们帮忙看看
这是我的webpack配置代码
webpack.config.base.js
const path = require('path'); // node.js 中的基本包，用于处理路径
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const CopyPlugin = require('copy-webpack-plugin')
const devMode = process.env.NODE_ENV !== 'production';
module.exports = {
entry: {
main: './src/main',
vendors: './src/vendors'
},
output: {
path: path.join(__dirname, '../dist/assets'), // 输出文件所在目录
},
module: {
rules: [
{
test: /.vue$/,
loader: 'vue-loader'
},
{
test: /.css$/, // css 处理
use: [
{
loader: MiniCssExtractPlugin.loader,
options: {
hmr:devMode
},
},
'css-loader',
'postcss-loader'
]
},
{
test: /.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
},
}
},
{
test: /.less$/, // less 处理
use: [
{
loader: MiniCssExtractPlugin.loader,
options: {
hmr:devMode
},
}, // 这样相当于抽离成一个css文件， 如果希望抽离成分别不同的css, 需要再引入MiniCssExtractPlugin，再配置
'css-loader', // css-loader 用来解析@import这种语法
'less-loader',
'postcss-loader'
],
},
{
test: /.(gif|jpg|png|woff|svg|eot|ttf)??.*$/,
use: {
loader: 'url-loader',
options: {
limit: 200 * 1024, // 小于200k变成base64
}
}
},
]
},
resolve: {
extensions: ['.js', '.vue'],
alias: {
'vue': 'vue/dist/vue.esm.js'
}
},
plugins: [
// Vue-loader在15.*之后的版本都是 vue-loader的使用都是需要伴生 VueLoaderPlugin的
new VueLoaderPlugin(),
new CopyPlugin({
patterns: [
{
from: './src/resource',
to: './resource'
}, {
from: './src/images',
to: './images'
}, {
from: './src/api.js',
to: './'
}
],
}),
// new CleanWebpackPlugin(),
new MiniCssExtractPlugin(),
// new BundleAnalyzerPlugin()
]
}
webpack.config.base.js
const webpack = require('webpack');
const path = require('path');
const webpackBaseConfig = require('./webpack.base.config');
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const HTMLWebpackPlugin = require('html-webpack-plugin');
const { merge } = require('webpack-merge');
const fs = require('fs');
module.exports = merge(webpackBaseConfig, {
mode: 'development',
devtool: '#source-map', // devtool由webpack直接提高，将打包后的文件中的错误映射到最初对应的文件中，便于调试
output: {
publicPath: '/assets/',
filename: '[name].js',
chunkFilename: '[name].chunk.js'
},
plugins: [
new MiniCssExtractPlugin({
// Options similar to the same options in webpackOptions.output
// both options are optional
filename: "[name].css",
chunkFilename: "[id].css"
}),
new HTMLWebpackPlugin({
filename: '../index.html',
template: './src/template/index.ejs',
inject: false
}),
],
})
webpack.config.prod.js
const webpack = require('webpack');
const path = require('path');
const webpackBaseConfig = require('./webpack.base.config');
const { merge } = require('webpack-merge');
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin")
const UglifyJsPlugin = require("uglifyjs-webpack-plugin")
const TerserJSPlugin = require('terser-webpack-plugin');
const HTMLWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
const fs = require('fs');
module.exports = merge(webpackBaseConfig, {
mode: 'production',
output: {
publicPath: '/assets/',
filename: '[name].[hash].js',
chunkFilename: '[name].[hash].chunk.js'
},
optimization: { // 优化项
minimizer: [
new TerserJSPlugin({ // 优化js
cache: false, // 是否缓存
parallel: true, // 是否并发打包
sourceMap: true // 源码映射 set to true if you want JS source maps
}),
new OptimizeCSSAssetsPlugin({}) // css 的优化
],
splitChunks: { // 分割代码块，针对多入口
cacheGroups: { // 缓存组
common: { // 公共模块
minSize: 0, // 大于多少抽离
maxSize: 244,
minChunks: 2, // 使用多少次以上抽离抽离
chunks: 'initial' // 从什么地方开始,刚开始
},
vendor: {
name: 'vendors',
priority: 1, // 增加权重, (先抽离第三方)
test: /node_modules/, // 把此目录下的抽离
minSize: 0,
maxSize: 244, // 大于多少抽离
minChunks: 2, // 使用多少次以上抽离抽离
chunks: 'initial' // 从什么地方开始,刚开始
}
}
},
},
plugins: [
new CleanWebpackPlugin(),
new HTMLWebpackPlugin({
filename: '../index.html',
template: './src/template/index.ejs',
inject: false
}),
new MiniCssExtractPlugin({
filename: "[name].[hash].css",
chunkFilename: "[id].[hash].css"
}),
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: '"production"'
}
}),
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery'
}),
new BundleAnalyzerPlugin({
// 可以是`server`，`static`或`disabled`。
// 在`server`模式下，分析器将启动HTTP服务器来显示软件包报告。
// 在“静态”模式下，会生成带有报告的单个HTML文件。
// 在`disabled`模式下，你可以使用这个插件来将`generateStatsFile`设置为`true`来生成Webpack Stats JSON文件。
analyzerMode: 'server',
// 将在“服务器”模式下使用的主机启动HTTP服务器。
analyzerHost: '127.0.0.1',
// 将在“服务器”模式下使用的端口启动HTTP服务器。
analyzerPort: 8888,
// 路径捆绑，将在`static`模式下生成的报告文件。
// 相对于捆绑输出目录。
reportFilename: 'report.html',
// 模块大小默认显示在报告中。
// 应该是`stat`，`parsed`或者`gzip`中的一个。
// 有关更多信息，请参见“定义”一节。
defaultSizes: 'parsed',
// 在默认浏览器中自动打开报告
openAnalyzer: true,
// 如果为true，则Webpack Stats JSON文件将在bundle输出目录中生成
generateStatsFile: false,
// 如果`generateStatsFile`为`true`，将会生成Webpack Stats JSON文件的名字。
// 相对于捆绑输出目录。
statsFilename: 'stats.json',
// stats.toJson（）方法的选项。
// 例如，您可以使用`source：false`选项排除统计文件中模块的来源。
// 在这里查看更多选项：https： //github.com/webpack/webpack/blob/webpack-1/lib/Stats.js#L21
statsOptions: null,
logLevel: 'info' // 日志级别。可以是'信息'，'警告'，'错误'或'沉默'。
})
]
})
