项目打包太慢了，run build:prod一次要10分钟+,怎么优化

kxy1107 commented 5 years ago

随着项目的增大，打包越来越慢，看了网上的优化方法，这边本身基本都有用到，不清楚要不要把 CommonsChunkPlugin 改成 dllPlugin 的拆分会不会好点，我这边很多第三方库是使用cdn的方式引入的，比如vue，vuex，vue-route,elementr等。 package清单 { "name": "vue-element-admin", "version": "3.6.4", "description": "A magical vue admin. Typical templates for enterprise applications. Newest development stack of vue. Lots of awesome features", "author": "Pan panfree23@gmail.com", "license": "MIT", "private": true, "scripts": { "dev": "cross-env BABEL_ENV=development webpack-dev-server --inline --progress --config build/webpack.dev.conf.js", "build:dev": "cross-env NODE_ENV=development env_config=dev node build/build.js", "build:dev2": "cross-env NODE_ENV=development env_config=dev2 node build/build.js", "build:sit": "cross-env NODE_ENV=production env_config=sit node build/build.js", "build:prod": "cross-env NODE_ENV=production env_config=prod node build/build.js", "lint": "eslint --ext .js,.vue src", "test": "npm run lint" }, "dependencies": { "2015": "0.0.1", "awe-dnd": "^0.3.1", "axios": "0.17.1", "babel-polyfill": "^6.26.0", "clipboard": "1.7.1", "codemirror": "5.32.0", "dropzone": "5.2.0", "echarts": "3.8.5", "element-ui": "2.0.8", "file-saver": "^1.3.3", "font-awesome": "4.7.0", "hls.js": "^0.11.0", "jQuery": "^1.7.4", "js-cookie": "2.2.0", "jsdom": "^11.9.0", "jsonlint": "1.6.2", "jszip": "3.1.5", "location": "0.0.1", "mockjs": "1.0.1-beta3", "navigator": "^1.0.1", "normalize.css": "7.0.0", "nprogress": "0.2.0", "screenfull": "3.3.2", "showdown": "1.8.5", "simplemde": "1.11.2", "sortablejs": "1.7.0", "vue": "^2.5.16", "vue-amap": "^0.5.4", "vue-aplayer": "^1.6.1", "vue-count-to": "1.0.13", "vue-i18n": "7.3.2", "vue-kindeditor": "^0.3.0", "vue-multiselect": "2.0.8", "vue-router": "3.0.1", "vue-splitpane": "1.0.2", "vuedraggable": "2.15.0", "vuex": "3.0.1", "xlsx": "^0.11.19", "xmlhttprequest": "^1.8.0" }, "devDependencies": { "autoprefixer": "7.2.3", "babel-core": "6.26.0", "babel-eslint": "8.0.3", "babel-helper-vue-jsx-merge-props": "2.0.3", "babel-loader": "7.1.2", "babel-plugin-syntax-jsx": "6.18.0", "babel-plugin-transform-runtime": "6.23.0", "babel-plugin-transform-vue-jsx": "3.5.0", "babel-preset-env": "1.6.1", "babel-preset-stage-2": "6.24.1", "chalk": "2.3.0", "copy-webpack-plugin": "4.3.0", "cross-env": "5.1.1", "css-loader": "0.28.7", "eslint": "4.13.1", "eslint-friendly-formatter": "3.0.0", "eslint-loader": "1.9.0", "eslint-plugin-html": "4.0.1", "extract-text-webpack-plugin": "3.0.2", "file-loader": "1.1.5", "friendly-errors-webpack-plugin": "1.6.1", "html-webpack-plugin": "2.30.1", "node-notifier": "5.1.2", "node-sass": "^4.7.2", "optimize-css-assets-webpack-plugin": "3.2.0", "ora": "1.3.0", "portfinder": "1.0.13", "postcss-import": "11.0.0", "postcss-loader": "2.0.9", "postcss-url": "7.3.0", "pushstate-server": "3.0.1", "rimraf": "2.6.2", "sass-loader": "6.0.6", "script-loader": "^0.7.2", "semver": "5.4.1", "shelljs": "0.7.8", "svg-sprite-loader": "3.5.2", "uglifyjs-webpack-plugin": "1.1.3", "url-loader": "0.6.2", "v-distpicker": "^1.0.16", "vue-cropper": "^0.2.9", "vue-loader": "^13.7.2", "vue-style-loader": "3.0.3", "vue-template-compiler": "^2.5.16", "webpack": "3.10.0", "webpack-bundle-analyzer": "2.9.1", "webpack-dev-server": "2.9.7", "webpack-merge": "4.1.1" }, "engines": { "node": ">= 4.0.0", "npm": ">= 3.0.0" }, "browserslist": [ "> 1%", "last 2 versions", "not ie <= 8" ] }

PanJiaChen commented 5 years ago

https://github.com/stephencookdev/speed-measure-webpack-plugin#readme 看一下是哪一步最耗时

kxy1107 commented 5 years ago

@PanJiaChen
SMP ⏱ General output time took 11 mins, 29.003 secs

SMP ⏱ Plugins UglifyJsPlugin took 30.71 secs ExtractTextPlugin took 7.68 secs OptimizeCssAssetsPlugin took 1.26 secs CommonsChunkPlugin took 1.1 secs HtmlWebpackPlugin took 0.703 secs ModuleConcatenationPlugin took 0.115 secs HashedModuleIdsPlugin took 0.083 secs Object took 0.049 secs DefinePlugin took 0.016 secs

SMP ⏱ Loaders modules with no loaders took 1 min, 26.97 secs module count = 972 F:\work\lecturer-admin-fe\node_modules\vue-loader\index.js took 1 min, 21.83 secs module count = 364 F:\work\lecturer-admin-fe\node_modules\babel-loader\lib\index.js took 1 min, 16.48 secs module count = 78 F:\work\lecturer-admin-fe\node_modules\css-loader\index.js, and F:\work\lecturer-admin-fe\node_modules\postcss-loader\lib\index.js took 45.62 secs module count = 6 F:\work\lecturer-admin-fe\node_modules\babel-loader\lib\index.js, and F:\work\lecturer-admin-fe\node_modules\vue-loader\lib\selector.js took 36.1 secs module count = 357 F:\work\lecturer-admin-fe\node_modules\url-loader\index.js took 31.29 secs module count = 21 F:\work\lecturer-admin-fe\node_modules\css-loader\index.js, and F:\work\lecturer-admin-fe\node_modules\vue-loader\lib\style-compiler\index.js, and F:\work\lecturer-admin-fe\node_modules\sass-loader\lib\loader.js, and F:\work\lecturer-admin-fe\node_modules\vue-loader\lib\selector.js took 21.29 secs module count = 36 F:\work\lecturer-admin-fe\node_modules\vue-loader\lib\template-compiler\index.js, and F:\work\lecturer-admin-fe\node_modules\vue-loader\lib\selector.js took 20.29 secs module count = 358 F:\work\lecturer-admin-fe\node_modules\css-loader\index.js, and F:\work\lecturer-admin-fe\node_modules\vue-loader\lib\style-compiler\index.js, and F:\work\lecturer-admin-fe\node_modules\vue-loader\lib\selector.js took 10.47 secs module count = 255 F:\work\lecturer-admin-fe\node_modules\css-loader\index.js, and F:\work\lecturer-admin-fe\node_modules\postcss-loader\lib\index.js, and F:\work\lecturer-admin-fe\node_modules\sass-loader\lib\loader.js took 8.35 secs module count = 2 F:\work\lecturer-admin-fe\node_modules\svg-sprite-loader\lib\loader.js took 4.53 secs module count = 122 F:\work\lecturer-admin-fe\node_modules\extract-text-webpack-plugin\dist\loader.js, and F:\work\lecturer-admin-fe\node_modules\vue-style-loader\index.js, and F:\work\lecturer-admin-fe\node_modules\css-loader\index.js, and F:\work\lecturer-admin-fe\node_modules\vue-loader\lib\style-compiler\index.js, and F:\work\lecturer-admin-fe\node_modules\vue-loader\lib\selector.js took 1.74 secs module count = 255 F:\work\lecturer-admin-fe\node_modules\extract-text-webpack-plugin\dist\loader.js, and F:\work\lecturer-admin-fe\node_modules\vue-style-loader\index.js, and F:\work\lecturer-admin-fe\node_modules\css-loader\index.js, and F:\work\lecturer-admin-fe\node_modules\postcss-loader\lib\index.js, and F:\work\lecturer-admin-fe\node_modules\sass-loader\lib\loader.js took 0.905 secs module count = 2 F:\work\lecturer-admin-fe\node_modules\extract-text-webpack-plugin\dist\loader.js, and F:\work\lecturer-admin-fe\node_modules\vue-style-loader\index.js, and F:\work\lecturer-admin-fe\node_modules\css-loader\index.js, and F:\work\lecturer-admin-fe\node_modules\postcss-loader\lib\index.js took 0.719 secs module count = 6 F:\work\lecturer-admin-fe\node_modules\extract-text-webpack-plugin\dist\loader.js, and F:\work\lecturer-admin-fe\node_modules\vue-style-loader\index.js, and F:\work\lecturer-admin-fe\node_modules\css-loader\index.js, and F:\work\lecturer-admin-fe\node_modules\vue-loader\lib\style-compiler\index.js, and F:\work\lecturer-admin-fe\node_modules\sass-loader\lib\loader.js, and F:\work\lecturer-admin-fe\node_modules\vue-loader\lib\selector.js took 0.701 secs module count = 36 F:\work\lecturer-admin-fe\node_modules\html-webpack-plugin\lib\loader.js took 0.096 secs module count = 1 F:\work\lecturer-admin-fe\node_modules\json-loader\index.js took 0.002 secs module count = 1

Hash: b63ee7dabd85b029e291 Version: webpack 3.10.0 Time: 689005ms

wepack.base.conf.js清单

'use strict' const path = require('path') const utils = require('./utils') const config = require('../config') const vueLoaderConfig = require('./vue-loader.conf')

function resolve (dir) { return path.join(__dirname, '..', dir) }

const createLintingRule = () => ({ // test: /.(js|vue)$/, // loader: 'eslint-loader', // enforce: 'pre', // include: [resolve('src'), resolve('test')], // options: { // formatter: require('eslint-friendly-formatter'), // emitWarning: !config.dev.showEslintErrorsInOverlay // } })

module.exports = { context: path.resolve(__dirname, '../'), entry: { app: ["babel-polyfill", "./src/main.js"] }, output: { path: config.build.assetsRoot, filename: '[name].js', publicPath: process.env.NODE_ENV === 'production' ? config.build.assetsPublicPath : config.dev.assetsPublicPath }, resolve: { extensions: ['.js', '.vue', '.json'], modules: [ resolve('src'), resolve('node_modules') ], alias: { 'vue$': 'vue/dist/vue.esm.js', '@': resolve('src'), } }, module: { rules: [ // ...(config.dev.useEslint ? [createLintingRule()] : []), { test: /.vue$/, loader: 'vue-loader', options: vueLoaderConfig }, { test: /.js$/, loader: 'babel-loader?cacheDirectory', include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')] }, { test: /.svg$/, loader: 'svg-sprite-loader', include: [resolve('src/icons')], options: { symbolId: 'icon-[name]' } }, { test: /.(png|jpe?g|gif|svg)(\?.)?$/, loader: 'url-loader', exclude: [resolve('src/icons')], options: { limit: 10000, name: utils.assetsPath('img/[name].[hash:7].[ext]') } }, { test: /.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.)?$/, loader: 'url-loader', options: { limit: 10000, name: utils.assetsPath('media/[name].[hash:7].[ext]') } }, { test: /.(woff2?|eot|ttf|otf)(\?.*)?$/, loader: 'url-loader', options: { limit: 10000, name: utils.assetsPath('fonts/[name].[hash:7].[ext]') } } ] }, externals: { 'vue': 'Vue', 'vuex': 'Vuex', 'vue-router': 'VueRouter', 'axios': 'axios', 'element-ui': 'ELEMENT', 'AMap': 'AMap', 'jquery': 'jQuery' }, node: { // prevent webpack from injecting useless setImmediate polyfill because Vue // source contains it (although only uses it if it's native). setImmediate: false, // prevent webpack from injecting mocks to Node native modules // that does not make sense for the client dgram: 'empty', fs: 'empty', net: 'empty', tls: 'empty', child_process: 'empty' } }

PanJiaChen commented 5 years ago

没看出什么问题，若还有什么问题，请提供一个最小在线还原demo。

WilliamLin1990 commented 5 years ago

我是通过删除tinymce做到的，当然，我的项目中不需要这个。删除后发现快了好多。

PanJiaChen commented 5 years ago

目前tinymce并不会打包，只是做了copy，删除能提高一点速度吧，但这耗时超过了十分钟，应该是其它什么问题了。

joker-ssh commented 5 years ago

我也有一样的问题第一次跑是ok的后面跑就是很卡也很慢

BG7ZAG commented 5 years ago

我这边是线上第一次加载 900k的chunk-libs.js，花了26s左右，我也用了cdn加载vue、ELEMENT，但感觉好像无效

if (process.env.ENV === 'production') {
      config.externals = {
        'element-ui': 'ELEMENT',
        'axios': 'axios',
        'echarts': 'echarts',
        'vue': 'Vue',
        'vue-router': 'VueRouter',
        'vuex': 'Vuex'
      }
    }

PanJiaChen / vue-element-admin

项目打包太慢了，run build:prod一次要10分钟+,怎么优化 #1327