㈠ web前端網站性能優化怎麼壓縮傳輸
壓縮可以對純文本可以壓縮至原內容的40%, 從而節省了60%的數據傳輸，GZIP是一種常用的壓縮編碼。因此，對文本類型的資源如CSS、JS、HTML啟用GZIP壓縮加速http傳輸速度。推薦你去三人行慕課上學習，比較全面
㈡ web前端打包工具有哪些
工具很多，目前常用的是webpack， grunt等，在沒出現更好的工具之前，學好這兩個其中的一個基本都夠用了。
㈢ 如何解決webpack打包的文件體積過大的問題
解決webpack打包的文件體積過大的問題：
確實，每次打包從入口開始，會parse所有的依賴，多的時候竟然打包一次要2秒多，簡直不能忍。然而，有幾個解決方案，最有效的，是使用weboack的watch，只有文件md5變化時，才會重新打包，並且只parse有變化的文件，其他沒變化的文件是使用緩存的。這樣子，打包時間迅速降到200ms以內。 再優化下去的話，我們要知道webpack打包的過程中做了啥，首先是解析依賴啦，然後就是各種各樣的loader。從解析依賴的角度入手，我們可以bower install一些打包好的文件，然後通過設置別名讓依賴指向這個文件，這樣就減去了第三方庫的依賴解析時間。 然後各種各樣的loader也是很耗時的，一種辦法是在loader裡面配include，讓loader只針對特殊資源。
㈣ 前端項目打包後536.5KB算大嗎
前端項目打包後536.5kb大小確實有點大了，不過要看你做的什麼項目。
㈤ 使用vue-cli生成的vendor.js文件太大，有辦法減少體積嗎
首先，在寫 Vue 的時候，應該採用懶載入模式，之後生成的包，就會被打入到不同分組的 js，運行時按需載入，詳情見：Vue-路由懶載入；這個意義重大！
其次，可利用，webpack.DllReferencePlugin webpack.DllReferencePlugin 將常用不怎麼變更的文件，打入一個統一的文件，外鏈使用。這個主要作用也可用來縮小包構建的時間；這個網上教程蠻多，就不贅述。也可參見這個項目 jade-blog 來配置；這一步即是你通過配置將部分庫抽離出來，打包成另外的文件。
再次，可以利用 webpack-bundle-analyzer 可以分析打包後生成的文件結構，十分牛掰（最新 Vue-cli 帶有此配置）；在 package.json 中配置如下命令 npm run analyz，運行即可查看之：
"analyz": "NODE_ENV=proction npm_config_report=true npm run build"
㈥ 【Web前端基礎】webpack打包原理是什麼
【Web前端基礎】webpack打包原理是什麼？1、概念
本質上，webpack 基於node平台，利用 node 的各種api來實現 javascript 應用程序的一個靜態模塊的打包工具。
在打包過程中，構建依賴關系，並且實現模塊引用預處理，以及緩存等。
2、分析
1、人口文件
// mian.js
const a = require('./m1')
const b= require('./m2')
import { test } from './m1'
console.log(test)
//m2.js
export default {
b:2
}
//m1.js
export const test = {test:1}
export default {
a:1
}
2、生產的文件
(function (moles) {
var installedMoles = {}; //緩存
/*
* 載入模塊函數
* 傳入模塊id
* */
function __webpack_require__(moleId) {
// 檢查緩存中是否有模塊
if (installedMoles[moleId]) {
return installedMoles[moleId].exports;
}
// 創建一個新模塊，並緩存起來
var mole = installedMoles[moleId] = {
i: moleId,
l: false,
exports: {}
};
// 調模塊的函數，moles
moles[moleId].call(mole.exports, mole, mole.exports, __webpack_require__);
mole.l = true;
// 返回對應模塊
return mole.exports;
}
__webpack_require__.m = moles;
__webpack_require__.c = installedMoles;
__webpack_require__.d = function (exports, name, getter) {
if (!__webpack_require__.o(exports, name)) {
Object.defineProperty(exports, name, {
configurable: false,
enumerable: true,
get: getter
});
}
};
__webpack_require__.n = function (mole) {
var getter = mole && mole.__esMole ?
function getDefault() {
return mole['default'];
} :
function getMoleExports() {
return mole;
};
__webpack_require__.d(getter, 'a', getter);
return getter;
};
__webpack_require__.o = function (object, property) {
return Object.prototype.hasOwnProperty.call(object, property);
};
__webpack_require__.p = "";
// 載入入口文件
return __webpack_require__(__webpack_require__.s = 0);
})
([
(function (mole, exports, __webpack_require__) {
const a = __webpack_require__(1)
const b = __webpack_require__(2)
}),
(function (mole, __webpack_exports__, __webpack_require__) {
"use strict";
Object.defineProperty(__webpack_exports__, "__esMole", {value: true});
__webpack_exports__["default"] = ({
a: 1
});
}),
(function (mole, __webpack_exports__, __webpack_require__) {
"use strict";
Object.defineProperty(__webpack_exports__, "__esMole", {value: true});
__webpack_exports__["default"] = ({
b: 2
});
})
]);
觀察以上代碼得到結果：
1、打包後的代碼是一個立即執行函數，且傳入的參數為一個數組
2、參數數組就是我們引用的模塊
3、每一個模塊對應著數組的位置就是那麼的id
4、在立即函數中載入入口文件，並執行
__webpack_require__ ： 載入並執行某一個模塊並將模塊緩存在 installedMoles 中。
moles[moleId].call(mole.exports, mole, mole.exports, __webpack_require__);
這里是執行引用的某一個模塊。
並將mole，exports，require 加入模塊中。
這也是為什麼我們在模塊中有全局變數 mole/exports/require
通過對打包後的文件分析，基本可以完全理解打包過程。
㈦ web前端開發的幾個問題
1.嵌套表單一般不會有什麼問題，主要是看業務需求，不過盡量還是不要使用嵌套。
2.name只是標簽的屬性，一般的網頁標簽元素都可以使用這個屬性，並非只能表單域里的標簽才能使用。比如 div、span、input等等都可以有name屬性。
3.JQuery已經成為JS腳本開發的標配了，本身的體積也比較小，最主要的是簡化了很多JS操作，而且我們基本不用考慮JS的瀏覽器兼容問題了。至於性能和原生的JS沒什麼區別，放心使用吧。