Jump to content

SUBIECTE NOI
« 1 / 5 »
RSS
Schimbare adresa DNS IPv4 pe rout...

Recomandare Barebone

Monede JO 2024

Suprasolicitare sistem electric
 CIV auto import

Mutare in MOZAMBIC - pareri, expe...

Scoatere antifurt airtag de pe ha...

Magnet in loc de clește pent...
 Cumparat/Locuit in apartament si ...

Pot folosi sistemul PC pe post de...

Sokol cu distorsiuni de cross-over

Filtru apa potabila cu osmoza inv...
 Kanal D va difuza serialul “...

Upgrade xiaomi mi11

securitate - acum se dau drept - ...

Farmacia Dr Max - Pareri / Sugest...
 

[Webpack] Impachetare separata a dependintelor

- - - - -
  • Please log in to reply
5 replies to this topic

#1
dani.user

dani.user

    Guru Member

  • Grup: Senior Members
  • Posts: 30,236
  • Înscris: 24.02.2007
In cadrul unei aplicatii web, am deocamdata asa:
  • bundle.js - codul aplicatiei
  • config.js - cateva linii de configurare
  • diverse alte .js dependinte (copiez varianta gata minimizata din node_modules/dist)
Cum pot uni cel mai eficient dependintele intr-un alt bundle, separat de restul aplicatiei? Separat pentru a fi mai usor de cache-uit fiindca se vor actualiza mult mai rar.

Configul actual arata asa: https://github.com/d...bpack.config.js

Am incercat abordarea de aici https://medium.com/a...es-e1b3d83579bf dar se pare ca se baga prea adanc, si mai da si eroare

Spoiler

Edited by dani.user, 01 February 2018 - 21:22.


#2
tatarduka

tatarduka

    Senior Member

  • Grup: Senior Members
  • Posts: 3,042
  • Înscris: 30.10.2006
Se folosesc entry-uri diferite.

1. din package.json lipsesc anumite pachete (webpack, typescript)
2. se folosesc entry-uri diferite si un fisier vendor.ts in care importi ce ai nevoie din pachetele npm (daca folosesti tree shacking, importi doar ce ai nevoie)
3. sunt curios: nu ai gasit nici un lib/framework care sa-ti satisfaca nevoile pentru web client? (angular/react/vue.js/slim.js/alte sute...)

Adauga un vendor.ts in src:
import 'jquery';
import 'uikit';
//TODO: import the css but also add a CSS loader
//TODO: import rest of the libs


Si incearca cu webpack.config.js:
const path = require('path');
const webpack = require('webpack');
module.exports = {
entry: {
	 main: './src/app.ts',
	 vendor: './src/vendor.ts',
},
output: {
	 filename: '[name].js',
	 path: path.resolve(__dirname, 'dist')
},
devtool: 'source-map',
plugins: [
	 // new webpack.optimize.UglifyJsPlugin()
],
resolve: {
	 extensions: ['.webpack.js', '.web.js', '.ts', '.js']
},
module: {
	 loaders: [
		 {test: /\.ts$/, loader: 'ts-loader'},
		 // {test: require.resolve('jquery/dist/jquery.min'), loader: 'expose-loader?jQuery!expose-loader?$'},
		 // {test: require.resolve('uikit/dist/js/uikit.min'), loader: 'expose-loader?UIkit!expose-loader?$'}
	 ]
}
};


Edited by tatarduka, 02 February 2018 - 12:21.


#3
dani.user

dani.user

    Guru Member

  • Grup: Senior Members
  • Posts: 30,236
  • Înscris: 24.02.2007
Mersi, functioneaza.

N-am ales un framework js dedicat din cateva motive:
  • Profit ca nu e un proiect contra-cronometru ca sa mai aprofundez API-ul "vanilla" oferit de browser (jQuery-ul inclus e ca dependinta pentru uikit, in codul meu il folosesc, doar intr-un loc)
  • Am vrut sa am mai mult control cand vine vorba de optimizat una alta. Mai am ceva de lucrat aici si incep sa ma simt limitat de codul js din uikit.
  • Vreau sa evit situatii de genul: noul super feature X e disponibil abia in versiunea noua a frameworkului, dar trebuie rescris totul ca s-au gandit sa rescrie bune parti din framework.


#4
OriginalCopy

OriginalCopy

    I'm harmful, fear me please! :))

  • Grup: Senior Members
  • Posts: 27,268
  • Înscris: 10.08.2006

 dani.user, on 02 februarie 2018 - 19:36, said:

Mai am ceva de lucrat aici si incep sa ma simt limitat de codul js din uikit.

Mie nu imi arata bine acel uikit doar uitandu-ma la cat % din el e nefolosit.

Pentru mine arata ca un candidat bun pentru plecare.

#5
dani.user

dani.user

    Guru Member

  • Grup: Senior Members
  • Posts: 30,236
  • Înscris: 24.02.2007
Poate reusesc sa-l "scutur" pana fac rost de ceva mai bun.

#6
dani.user

dani.user

    Guru Member

  • Grup: Senior Members
  • Posts: 30,236
  • Înscris: 24.02.2007
Cu exceptia lui highlight.js, toate dependintele (cu tot cu style sheets) au ajuns in others.bundle.js care minimizat, ocupa 889081 bytes (gziped vreo 221k).
Fonturile le-am lasat afara ca doar unele sunt incarcate la un moment dat (functie de browser si setari).

Edited by dani.user, 03 February 2018 - 13:59.


Anunturi

Bun venit pe Forumul Softpedia!

0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users

Forumul Softpedia foloseste "cookies" pentru a imbunatati experienta utilizatorilor Accept
Pentru detalii si optiuni legate de cookies si datele personale, consultati Politica de utilizare cookies si Politica de confidentialitate