菜鸟一只，请教一个 Nodejs webpack+vuecli 打包体积的问题

发布于 1周前 作者 ionicwang 来自 nodejs/Nestjs

菜鸟一只，请教一个 Nodejs webpack+vuecli 打包体积的问题

最初用 vue init webpack-simple 创建了个项目， 写了一些东西，执行 npm run build 后打出了 800+kb 大小的 build.js， 不知道是什么原因它有这么大的体积，请高手指点下改进方式,谢谢了：

以下是我的配置: <<package.json>>

"scripts": { "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot", "build": "cross-env NODE_ENV=production webpack --progress --hide-modules" }, "dependencies": { "iview": "^2.0.0-rc.16", "vue": "^2.3.3", }, "devDependencies": { "babel-core": "^6.0.0", "babel-loader": "^6.0.0", "babel-preset-env": "^1.5.1", "cross-env": "^3.0.0", "css-loader": "^0.25.0", "file-loader": "^0.9.0", "iview": "^2.0.0-rc.16", "node-sass": "^4.5.0", "sass-loader": "^5.0.1", "script-loader": "^0.7.0", "style-loader": "^0.18.2", "url-loader": "^0.5.9", "vue-loader": "^12.1.0", "vue-template-compiler": "^2.3.3", "webpack": "^2.6.1", "webpack-dev-server": "^2.4.5" }

<<webpack.config.js>> var path = require('path') var webpack = require('webpack')

module.exports = { entry: './src/main.js', output: { path: path.resolve(__dirname, './dist'), publicPath: '/dist/', filename: 'build.js' }, module: { rules: [ { test: /.vue$/, loader: 'vue-loader', options: { loaders: { // Since sass-loader (weirdly) has SCSS as its default parse mode, we map // the "scss" and "sass" values for the lang attribute to the right configs here. // other preprocessors should work out of the box, no loader config like this necessary. 'scss': 'vue-style-loader!css-loader!sass-loader', 'sass': 'vue-style-loader!css-loader!sass-loader?indentedSyntax' } // other vue-loader options go here } }, { test: /iview.src.?js$/, loader: 'babel-loader' }, { test: /.js$/, loader: 'babel-loader', exclude: /node_modules/ }, { test: /.(png|jpg|gif|svg)$/, loader: 'file-loader', options: { name: '[name].[ext]?[hash]' } },
{ test: /.css$/, use: [ 'style-loader', 'css-loader' ] }, { test: /.(gif|jpg|png|woff|svg|eot|ttf)??.$/, use: ['url-loader']

  }
]

}, resolve: { alias: { 'vue$': 'vue/dist/vue.esm.js' } }, devServer: { historyApiFallback: true, noInfo: true }, performance: { hints: false }, devtool: false } //↑devtool: '#eval-source-map' //↓module.exports.devtool = '#source-map' if (process.env.NODE_ENV === 'production') { module.exports.devtool = false // http://vue-loader.vuejs.org/en/workflow/production.html module.exports.plugins = (module.exports.plugins || []).concat([ new webpack.DefinePlugin({ 'process.env': { NODE_ENV: '"production"' } }), new webpack.optimize.UglifyJsPlugin({ sourceMap: false, compress: { warnings: false } }), new webpack.LoaderOptionsPlugin({ minimize: true }) ]) }

<<index.html>> 引入一些 cdn 和本地资源， 加起来目测 100kb 左右

<<main.js>> import Vue from 'vue' import App from './App.vue' import Modal from 'iview/src/components/modal'; import 'iview/dist/styles/iview.css' Vue.use(Modal) new Vue({ el: '#app', render: h => h(App) })


Harmonyos Next教程
5 回复

用 vue init webpack myproject 默认打包很小的, webpack-simple 不清楚


https://chrisbateman.github.io/webpack-visualizer/

用这个在线工具能分析 webpack 打包出来东西的组成。看看那个地方占的多。

看你用的库有没有帮你处理按需引入，或者说有没有相关的说明文档。一般直接从模块名引入都是打包了整个组件库。

去掉 Sourcemap 会小很多

你好！针对你提到的 Node.js 项目中使用 Webpack 和 Vue CLI 打包体积过大的问题，这里有一些常见的优化策略：

  1. 代码分割（Code Splitting）： Vue CLI 默认支持代码分割，通过动态导入（import()）来实现。

    // 示例：按需加载组件
const MyComponent = () => import('./MyComponent.vue');

  2. 压缩和优化： 确保你使用了 Webpack 的 TerserPlugin 来压缩 JavaScript，以及 css-minimizer-webpack-plugin 来压缩 CSS。

    const TerserPlugin = require('terser-webpack-plugin');
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');

module.exports = {
  optimization: {
    minimize: true,
    minimizer: [new TerserPlugin(), new CssMinimizerPlugin()],
  },
};

  3. Tree Shaking： 确保你的依赖库支持 ES6 模块，并正确配置了 mode: 'production' 以启用 Tree Shaking。

  4. 使用 DLL 插件： 对于不常变动的库，可以使用 Webpack 的 DLL 插件来提前打包它们，减少每次构建的时间。

  5. 分析打包结果： 使用 webpack-bundle-analyzer 来可视化并分析打包后的文件大小。

    const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');

module.exports = {
  plugins: [new BundleAnalyzerPlugin()],
};

通过这些策略，你应该能显著减少打包后的体积。希望这些建议对你有帮助！

回到顶部