vue 加载数据 影响seu_vue如何优化首页的加载速度？

require('events').EventEmitter.prototype._maxListeners = 100; // 设置最大请求个数，解决代理请求超过10个，出现警告问题const webpack = require('webpack')

const merge = require('webpack-merge') // base64const APP_NAME = require('./package.json').name //项目名称const InsertScriptPlugin = require('./scripts/InsertScriptWebpackPlugin') //插入脚本插件const PROXY = require('./config/proxy') //子项目url代理配置文件const modules = require('./config/modules') //要加载的子项目配置文件const path = require('path')

// 优化插件const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin

const CompressionWebpackPlugin = require('compression-webpack-plugin')

const glob = require("glob-all")

const PurgecssPlugin = require("purgecss-webpack-plugin")

const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin')

const TerserPlugin = require('terser-webpack-plugin')

console.log(process.env.VUE_APP_ENV)

function resolve(dir) {

return path.join(__dirname, dir)

}

module.exports = {

publicPath: './',

productionSourceMap: false, // 是否开启 cssSourceMap, TODO??? [xsw] 打包应该设置未false??? // 设置为 false,如果设置为 true 时，打包的文件会包含有一个 map 的文件，(map 文件会占用大量的文件体积)主要是为了 build 构建的时候，可以查看具体的出错文件的位置，

/*** Type: Object* 所有webpack-dev-server的选项都支持* 有些值像host、port和https可能会被命令行参数覆写* 有些像publicPath和historyApiFallback不应该被修改，因为它们需要和开发服务器的baseUrl同步以保障正常工作*/

devServer: {

port: 18080, //项目端口 proxy: PROXY, //这会告诉服务器将任何未知请求 (没有匹配到静态文件的请求) 代理到PROXY中配置的url disableHostCheck: true, //关闭host检测(配置了这个才可以通过域名访问) compress: true, // 代码压缩 },

/*** 配置Webpack其他选项* 警告有些 webpack 选项是基于 vue.config.js 中的值设置的，所以不能直接修改。例如你应该修改 vue.config.js 中的 outputDir 选项而不是修改 output.path；你应该修改 vue.config.js 中的 baseUrl 选项而不是修改 output.publicPath。这样做是因为 vue.config.js 中的值会被用在配置里的多个地方，以确保所有的部分都能正常工作在一起。*/

configureWebpack: {

//这里必须引入vue externals: {

vue: 'Vue',

},

// 分离 插件 optimization: {

minimize: true,

minimizer: [

new TerserPlugin({

test: /\.js(\?.*)?$/i,

cache: true,

parallel: true,

extractComments: "all"

}),

new OptimizeCSSAssetsPlugin({

// 默认是全部的CSS都压缩，该字段可以指定某些要处理的文件 assetNameRegExp: /\.(sa|sc|c)ss$/g,

// 指定一个优化css的处理器，默认cssnano cssProcessor: require('cssnano'),

cssProcessorPluginOptions: {

preset: [ 'default', {

discardComments: { removeAll: true}, //对注释的处理 normalizeUnicode: false // 建议false,否则在使用unicode-range的时候会产生乱码 }]

},

canPrint: true // 是否打印编译过程中的日志 })

],

splitChunks: {

chunks: 'async',

minSize: 3000,

maxSize: 0,

minChunks: 1,

maxAsyncRequests: 5,

maxInitialRequests: 10,

automaticNameDelimiter: '~',

name: true,

cacheGroups: {

libs: {

name: "chunk-libs",

test: /[\\/]node_modules[\\/]/,

priority: 10,

chunks: "initial"

},

elementUI: {

name: "chunk-elementUI",

priority: 20,

test: /[\\/]node_modules[\\/]element-ui[\\/]/,

chunks: "all"

},

echarts: {

name: "chunk-echarts",

priority: 30,

test: /[\\/]node_modules[\\/]echarts[\\/]/,

chunks: "all"

},

ckeditor: {

name: "chunk-ckeditor",

priority: 40,

test: /[\\/]node_modules[\\/]@ckeditor[\\/]ckeditor5-build-classic[\\/]build[\\/]/,

chunks: "all"

},

styles: {

name: 'styles',

test: /\.(sa|sc|c)ss$/,

chunks: 'initial',

enforce: true,

},

moment: {

name: "chunk-moment",

priority: 50,

test: /[\\/]node_modules[\\/]moment[\\/]/,

chunks: "all"

},

zrender: {

name: "chunk-zrender",

priority: 60,

test: /[\\/]node_modules[\\/]zrender[\\/]/,

chunks: "all"

},

main: {

name: "chunk-main",

priority: 70,

test: /[\\/]src[\\/]main[\.]js/,

chunks: "all"

}

}

}

},

plugins: [

new webpack.DefinePlugin({

'XM.MN': JSON.stringify(APP_NAME),

}),

new InsertScriptPlugin({ files: modules }),

// new BundleAnalyzerPlugin({ // generateStatsFile: true, // statsOptions: { source: false } // }), // 去除 moment 中 i18n new webpack.ContextReplacementPlugin(/moment[\/\\]locale$/, /zh-cn/),

// 声明 ‘production’ 生产环境最小体积 new webpack.DefinePlugin({

'process.env': {

NODE_ENV: JSON.stringify('production')

}

}),

// 在代码层面上进行压缩 // new CompressionWebpackPlugin({ // algorithm: 'gzip', // test: /\.(js|css|json|txt|html|ico|svg)(\?.*)?$/i, // threshold: 0, // 只有大小大于该值的资源会被处理 // minRatio:0.8, // 只有压缩率小于这个值的资源才会被处理 // deleteOriginalAssets: false // 删除原文件 // }), // 去除 多余 css

// new PurgecssPlugin({ // paths: glob.sync([resolve("./src/**/*.vue")]), // }), // 开启 Scope Hoisting new webpack.optimize.ModuleConcatenationPlugin()

],

},

chainWebpack: config => {

//路径别名 config.resolve.alias

.set('@', resolve('src'))

.set('@css', resolve('src/assets/css'))

.set('@img', resolve('src/assets/image'))

.set('@api', resolve('src/api'))

.set('@bApi', resolve('src/baseApi'))

.set('@bCps', resolve('src/baseComponents'))

.set('@cps', resolve('src/components'))

.set('@api', resolve('src/api'))

.set('@pages', resolve('src/pages'))

//base64相关代码 // 图片压缩优化 image-webpack-loader config.module

.rule('images')

.test(/\.(png|jpe?g|gif|webp)(\?.*)?$/)

.use('url-loader')

.loader('url-loader')

.options({

limit: 200000

})

.end()

},

// 要全局使用的scss 变量、Mixin在这里引入(注：这类scss文件需要每个项目都放一份,这个配置也需要每个项目都写一份) css: {

loaderOptions: {

sass: {

data: `@import "@css/globalCite/defaultUrlVariable.scss";@import "@css/globalCite/blueUrlVariable.scss";@import "@css/globalCite/variable.scss";@import "@css/globalCite/themeVariable.scss";@import "@css/globalCite/themeMixin.scss";`

}

}

}

}