專案創建方式:
vue init webpack-simple project_name
最開始開發時倒不覺得如何, 現在打包時間越來越長, 而整個專案才開發1/5不到
image.png883×418 44.7 KB
專案結構
image.png365×843 9.17 KB
主要組件( 后期可能會更多 )
image.png254×658 7.49 KB
求助
有什么辦法可以提高打包速度嗎?
vue init webpack-simple 如何轉到vue init webpack
uj5u.com熱心網友回復：
用 CommonsChunkPlugin 插件 手動分割其他的可以看看我的博客:https://www.cnblogs.com/Grewer/p/9033530.html
uj5u.com熱心網友回復：
這就尷尬了, 童鞋有資料推薦么uj5u.com熱心網友回復：
map 檔案是壓縮代碼到原始代碼的映射。你想象一下網頁加載了壓縮版 JS 出了問題你怎么除錯。它跟 Webpack 無關，在 Webpack 出現之前就已經存在了。uj5u.com熱心網友回復：
現在的問題在于webpack-simple打包后只有一個.js和.map檔案, 而且超大
訪問速度也是一大問題, localhost回應時間至少5秒以上
現在想把這個js拆開, 兄弟有沒有辦法
uj5u.com熱心網友回復：
童鞋, 拆分build.js拆分需要怎么配置呢?uj5u.com熱心網友回復：
打包時在路由入口檔案配上webpackChunkName。這樣打包時候，就可以分模塊了。你這個是沒有分模塊導致的uj5u.com熱心網友回復：
需要調教 Webpack，該快取的快取、不用編譯的別編譯。這個是 Webpack 的問題，不認為換 Vue CLI 3.0 能帶來什么明顯改善。
uj5u.com熱心網友回復：
dll,cdn都可以加快速度按你圖上來看,先去掉 map 可以快點, build 在拆分一下,拆成2-3個就夠了,等到單個超過1M時,再試 cdn
uj5u.com熱心網友回復：
至少，先過一遍官方檔案吧：https://webpack.docschina.org/concepts/
（然后你就會放棄調教這個惡魔的念頭）
總之，大體思路就是我前面說的，盡量減少 Webpack 的作業量。隨著專案中的模塊變得越來越多，編譯時間也會無可避免地增加（雖然你這100多秒是有點夸張）。
uj5u.com熱心網友回復：
@vue/cli 能直接用 vue-cli 開發的代碼么?uj5u.com熱心網友回復：
build.js.map 是webpack打包時自動生成的, 可以洗掉嗎?uj5u.com熱心網友回復：
調教 Webpack 是個復雜而深刻的問題。所以才有了「Webpack 配置工程師」這么一個職位
uj5u.com熱心網友回復：
可以,這個沒什么太大作用,修改引數就可以不讓他生成uj5u.com熱心網友回復：
要不嘗試一下腳手架3？uj5u.com熱心網友回復：
https://webpack.docschina.org/guides/code-splitting/#動態匯入-dynamic-imports-uj5u.com熱心網友回復：
build 之后,代碼壓縮了,出了問題不容易找到,而 map 可以定位他的位置uj5u.com熱心網友回復：
webpack不太熟, 通過vue init webpack-simple xxx創建專案后, 基本上就沒動過那個檔案, 能給點建議嗎?var path = require('path');
var resolve = path.resolve;
var webpack = require('webpack');
module.exports = {
entry: './src/main.js',
output: {
// path: path.resolve(__dirname, './dist'),
path: path.resolve(__dirname, '../../webapp/dist'),
publicPath: '/dist/',
filename: 'build.js'
},
module: {
rules: [
{
test: /\.css$/,
use: [
'vue-style-loader',
'css-loader'
],
},
{
test: /\.scss$/,
use: [
'vue-style-loader',
'css-loader',
'sass-loader'
],
},
{
test: /\.sass$/,
use: [
'vue-style-loader',
'css-loader',
'sass-loader?indentedSyntax'
],
},
{
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: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/,
include: [resolve(__dirname, 'src'), resolve(__dirname, 'test'), resolve(__dirname, 'node_modules/.1.0.19@vue-echarts-v3/src')]
},
{
test: /\.(eot|svg|ttf|woff|woff2)(\?\S*)?$/,
loader: 'file-loader'
},
{
test: /\.(png|jpg|gif|svg)$/,
loader: 'file-loader',
options: {
name: '[name].[ext]?[hash]'
}
}
]
},
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js'
},
extensions: ['*', '.js', '.vue', '.json']
},
devServer: {
historyApiFallback: true,
noInfo: true,
overlay: true
},
performance: {
hints: false
},
devtool: '#eval-source-map'
}
if (process.env.NODE_ENV === 'production') {
module.exports.devtool = '#source-map'
// 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: true,
compress: {
warnings: false
}
}),
new webpack.LoaderOptionsPlugin({
minimize: true
})
])
}
uj5u.com熱心網友回復：
既然沒什么作用, webpack干嘛要生成它去掉的話會不會有什么副作用呢?
對 webpack 完全小白, 還請指教
uj5u.com熱心網友回復：
所以說學好webpack比學好vue都難:sob:uj5u.com熱心網友回復：
看了下你的組件量，打包時間居然有130多秒（黑線。。。照你描述的，你這個專案算一個中等專案，這么來說就不應該用webpack-simple 模板，這個模板沒用過記憶不深，應該用webpack 模板的，這個才是對中大型專案做了深入優化的。
我手上一個近30頁的移動端專案，剛才用cli 2 測驗了下打包速度，有28秒， 然后我又用cli 3 測驗了打包速度，時間沒有列印出來，但是能明顯感覺到打包速度提升了許多，至少減少了30%以上。
我的專案是兩個星期前剛轉cli 3 的，提升效果明顯，官方檔案也寫的清楚，專案檔案里也沒有了之前build 等檔案夾。建議你也把專案轉 cli 3 。
前不久剛過了一遍webpack 英文檔案（極其痛苦），能很負責任的告訴你，如果你用 cli 2 webpack模板或者是cli 3的話，你只需要關注你的代碼質量和針對后期vendor 檔案做優化就基本沒什么大問題了。
我的專案目前打包出來就是vendor 偏大，其他基本沒問題。
uj5u.com熱心網友回復：
我也遇到了問題，這個東西目前沒辦法，想想翻譯，你的所有頁面變成了js字串，如果有less什么也要翻譯，我把檢測js的插件關了，核心的直接參考，還是慢。后臺這種專案都不知道有多少個頁面，拆專案？除非團隊人手夠，如果人手夠，樓主也不會提問了，感覺目前單頁面打包，目領大型專案400++的，很難駕馭， 構建這一塊，開發的時候需要頻繁保存看效果轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/81611.html
標籤：其他技術討論專區
上一篇：R-studio chartSeries報錯，求助各位大神！
下一篇：畢設求助：NLP模型評估