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

2017-06-14 13:02:21 +08:00
 drzhaug

最初用 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) })

4138 次点击
所在节点    Node.js
4 条回复
zhuangtongfa
2017-06-14 13:28:05 +08:00
用 vue init webpack myproject 默认打包很小的, webpack-simple 不清楚
ChefIsAwesome
2017-06-14 13:36:19 +08:00
https://chrisbateman.github.io/webpack-visualizer/

用这个在线工具能分析 webpack 打包出来东西的组成。看看那个地方占的多。
airyland
2017-06-14 14:29:54 +08:00
看你用的库有没有帮你处理按需引入,或者说有没有相关的说明文档。一般直接从模块名引入都是打包了整个组件库。
xrr2016
2017-06-14 20:08:50 +08:00
去掉 Sourcemap 会小很多

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/368315

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX